623 lines
16 KiB
JavaScript
623 lines
16 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
* @flow
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
const BlobManager = require('../Blob/BlobManager');
|
|
const EventTarget = require('event-target-shim');
|
|
const GlobalPerformanceLogger = require('react-native/Libraries/Utilities/GlobalPerformanceLogger');
|
|
const RCTNetworking = require('./RCTNetworking');
|
|
|
|
const base64 = require('base64-js');
|
|
const invariant = require('invariant');
|
|
const warning = require('fbjs/lib/warning');
|
|
|
|
const DEBUG_NETWORK_SEND_DELAY: false = false; // Set to a number of milliseconds when debugging
|
|
|
|
export type NativeResponseType = 'base64' | 'blob' | 'text';
|
|
export type ResponseType =
|
|
| ''
|
|
| 'arraybuffer'
|
|
| 'blob'
|
|
| 'document'
|
|
| 'json'
|
|
| 'text';
|
|
export type Response = ?Object | string;
|
|
|
|
type XHRInterceptor = {
|
|
requestSent(id: number, url: string, method: string, headers: Object): void,
|
|
responseReceived(
|
|
id: number,
|
|
url: string,
|
|
status: number,
|
|
headers: Object,
|
|
): void,
|
|
dataReceived(id: number, data: string): void,
|
|
loadingFinished(id: number, encodedDataLength: number): void,
|
|
loadingFailed(id: number, error: string): void,
|
|
...
|
|
};
|
|
|
|
// The native blob module is optional so inject it here if available.
|
|
if (BlobManager.isAvailable) {
|
|
BlobManager.addNetworkingHandler();
|
|
}
|
|
|
|
const UNSENT = 0;
|
|
const OPENED = 1;
|
|
const HEADERS_RECEIVED = 2;
|
|
const LOADING = 3;
|
|
const DONE = 4;
|
|
|
|
const SUPPORTED_RESPONSE_TYPES = {
|
|
arraybuffer: typeof global.ArrayBuffer === 'function',
|
|
blob: typeof global.Blob === 'function',
|
|
document: false,
|
|
json: true,
|
|
text: true,
|
|
'': true,
|
|
};
|
|
|
|
const REQUEST_EVENTS = [
|
|
'abort',
|
|
'error',
|
|
'load',
|
|
'loadstart',
|
|
'progress',
|
|
'timeout',
|
|
'loadend',
|
|
];
|
|
|
|
const XHR_EVENTS = REQUEST_EVENTS.concat('readystatechange');
|
|
|
|
class XMLHttpRequestEventTarget extends (EventTarget(...REQUEST_EVENTS): any) {
|
|
onload: ?Function;
|
|
onloadstart: ?Function;
|
|
onprogress: ?Function;
|
|
ontimeout: ?Function;
|
|
onerror: ?Function;
|
|
onabort: ?Function;
|
|
onloadend: ?Function;
|
|
}
|
|
|
|
/**
|
|
* Shared base for platform-specific XMLHttpRequest implementations.
|
|
*/
|
|
class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): any) {
|
|
static UNSENT: number = UNSENT;
|
|
static OPENED: number = OPENED;
|
|
static HEADERS_RECEIVED: number = HEADERS_RECEIVED;
|
|
static LOADING: number = LOADING;
|
|
static DONE: number = DONE;
|
|
|
|
static _interceptor: ?XHRInterceptor = null;
|
|
|
|
UNSENT: number = UNSENT;
|
|
OPENED: number = OPENED;
|
|
HEADERS_RECEIVED: number = HEADERS_RECEIVED;
|
|
LOADING: number = LOADING;
|
|
DONE: number = DONE;
|
|
|
|
// EventTarget automatically initializes these to `null`.
|
|
onload: ?Function;
|
|
onloadstart: ?Function;
|
|
onprogress: ?Function;
|
|
ontimeout: ?Function;
|
|
onerror: ?Function;
|
|
onabort: ?Function;
|
|
onloadend: ?Function;
|
|
onreadystatechange: ?Function;
|
|
|
|
readyState: number = UNSENT;
|
|
responseHeaders: ?Object;
|
|
status: number = 0;
|
|
timeout: number = 0;
|
|
responseURL: ?string;
|
|
withCredentials: boolean = true;
|
|
|
|
upload: XMLHttpRequestEventTarget = new XMLHttpRequestEventTarget();
|
|
|
|
_requestId: ?number;
|
|
_subscriptions: Array<*>;
|
|
|
|
_aborted: boolean = false;
|
|
_cachedResponse: Response;
|
|
_hasError: boolean = false;
|
|
_headers: Object;
|
|
_lowerCaseResponseHeaders: Object;
|
|
_method: ?string = null;
|
|
_perfKey: ?string = null;
|
|
_response: string | ?Object;
|
|
_responseType: ResponseType;
|
|
_response: string = '';
|
|
_sent: boolean;
|
|
_url: ?string = null;
|
|
_timedOut: boolean = false;
|
|
_trackingName: string = 'unknown';
|
|
_incrementalEvents: boolean = false;
|
|
|
|
static setInterceptor(interceptor: ?XHRInterceptor) {
|
|
XMLHttpRequest._interceptor = interceptor;
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this._reset();
|
|
}
|
|
|
|
_reset(): void {
|
|
this.readyState = this.UNSENT;
|
|
this.responseHeaders = undefined;
|
|
this.status = 0;
|
|
delete this.responseURL;
|
|
|
|
this._requestId = null;
|
|
|
|
this._cachedResponse = undefined;
|
|
this._hasError = false;
|
|
this._headers = {};
|
|
this._response = '';
|
|
this._responseType = '';
|
|
this._sent = false;
|
|
this._lowerCaseResponseHeaders = {};
|
|
|
|
this._clearSubscriptions();
|
|
this._timedOut = false;
|
|
}
|
|
|
|
get responseType(): ResponseType {
|
|
return this._responseType;
|
|
}
|
|
|
|
set responseType(responseType: ResponseType): void {
|
|
if (this._sent) {
|
|
throw new Error(
|
|
"Failed to set the 'responseType' property on 'XMLHttpRequest': The " +
|
|
'response type cannot be set after the request has been sent.',
|
|
);
|
|
}
|
|
if (!SUPPORTED_RESPONSE_TYPES.hasOwnProperty(responseType)) {
|
|
warning(
|
|
false,
|
|
`The provided value '${responseType}' is not a valid 'responseType'.`,
|
|
);
|
|
return;
|
|
}
|
|
|
|
// redboxes early, e.g. for 'arraybuffer' on ios 7
|
|
invariant(
|
|
SUPPORTED_RESPONSE_TYPES[responseType] || responseType === 'document',
|
|
`The provided value '${responseType}' is unsupported in this environment.`,
|
|
);
|
|
|
|
if (responseType === 'blob') {
|
|
invariant(
|
|
BlobManager.isAvailable,
|
|
'Native module BlobModule is required for blob support',
|
|
);
|
|
}
|
|
this._responseType = responseType;
|
|
}
|
|
|
|
get responseText(): string {
|
|
if (this._responseType !== '' && this._responseType !== 'text') {
|
|
throw new Error(
|
|
"The 'responseText' property is only available if 'responseType' " +
|
|
`is set to '' or 'text', but it is '${this._responseType}'.`,
|
|
);
|
|
}
|
|
if (this.readyState < LOADING) {
|
|
return '';
|
|
}
|
|
return this._response;
|
|
}
|
|
|
|
get response(): Response {
|
|
const {responseType} = this;
|
|
if (responseType === '' || responseType === 'text') {
|
|
return this.readyState < LOADING || this._hasError ? '' : this._response;
|
|
}
|
|
|
|
if (this.readyState !== DONE) {
|
|
return null;
|
|
}
|
|
|
|
if (this._cachedResponse !== undefined) {
|
|
return this._cachedResponse;
|
|
}
|
|
|
|
switch (responseType) {
|
|
case 'document':
|
|
this._cachedResponse = null;
|
|
break;
|
|
|
|
case 'arraybuffer':
|
|
this._cachedResponse = base64.toByteArray(this._response).buffer;
|
|
break;
|
|
|
|
case 'blob':
|
|
if (typeof this._response === 'object' && this._response) {
|
|
this._cachedResponse = BlobManager.createFromOptions(this._response);
|
|
} else if (this._response === '') {
|
|
this._cachedResponse = BlobManager.createFromParts([]);
|
|
} else {
|
|
throw new Error(`Invalid response for blob: ${this._response}`);
|
|
}
|
|
break;
|
|
|
|
case 'json':
|
|
try {
|
|
this._cachedResponse = JSON.parse(this._response);
|
|
} catch (_) {
|
|
this._cachedResponse = null;
|
|
}
|
|
break;
|
|
|
|
default:
|
|
this._cachedResponse = null;
|
|
}
|
|
|
|
return this._cachedResponse;
|
|
}
|
|
|
|
// exposed for testing
|
|
__didCreateRequest(requestId: number): void {
|
|
this._requestId = requestId;
|
|
|
|
XMLHttpRequest._interceptor &&
|
|
XMLHttpRequest._interceptor.requestSent(
|
|
requestId,
|
|
this._url || '',
|
|
this._method || 'GET',
|
|
this._headers,
|
|
);
|
|
}
|
|
|
|
// exposed for testing
|
|
__didUploadProgress(
|
|
requestId: number,
|
|
progress: number,
|
|
total: number,
|
|
): void {
|
|
if (requestId === this._requestId) {
|
|
this.upload.dispatchEvent({
|
|
type: 'progress',
|
|
lengthComputable: true,
|
|
loaded: progress,
|
|
total,
|
|
});
|
|
}
|
|
}
|
|
|
|
__didReceiveResponse(
|
|
requestId: number,
|
|
status: number,
|
|
responseHeaders: ?Object,
|
|
responseURL: ?string,
|
|
): void {
|
|
if (requestId === this._requestId) {
|
|
this._perfKey != null &&
|
|
GlobalPerformanceLogger.stopTimespan(this._perfKey);
|
|
this.status = status;
|
|
this.setResponseHeaders(responseHeaders);
|
|
this.setReadyState(this.HEADERS_RECEIVED);
|
|
if (responseURL || responseURL === '') {
|
|
this.responseURL = responseURL;
|
|
} else {
|
|
delete this.responseURL;
|
|
}
|
|
|
|
XMLHttpRequest._interceptor &&
|
|
XMLHttpRequest._interceptor.responseReceived(
|
|
requestId,
|
|
responseURL || this._url || '',
|
|
status,
|
|
responseHeaders || {},
|
|
);
|
|
}
|
|
}
|
|
|
|
__didReceiveData(requestId: number, response: string): void {
|
|
if (requestId !== this._requestId) {
|
|
return;
|
|
}
|
|
this._response = response;
|
|
this._cachedResponse = undefined; // force lazy recomputation
|
|
this.setReadyState(this.LOADING);
|
|
|
|
XMLHttpRequest._interceptor &&
|
|
XMLHttpRequest._interceptor.dataReceived(requestId, response);
|
|
}
|
|
|
|
__didReceiveIncrementalData(
|
|
requestId: number,
|
|
responseText: string,
|
|
progress: number,
|
|
total: number,
|
|
) {
|
|
if (requestId !== this._requestId) {
|
|
return;
|
|
}
|
|
if (!this._response) {
|
|
this._response = responseText;
|
|
} else {
|
|
this._response += responseText;
|
|
}
|
|
|
|
XMLHttpRequest._interceptor &&
|
|
XMLHttpRequest._interceptor.dataReceived(requestId, responseText);
|
|
|
|
this.setReadyState(this.LOADING);
|
|
this.__didReceiveDataProgress(requestId, progress, total);
|
|
}
|
|
|
|
__didReceiveDataProgress(
|
|
requestId: number,
|
|
loaded: number,
|
|
total: number,
|
|
): void {
|
|
if (requestId !== this._requestId) {
|
|
return;
|
|
}
|
|
this.dispatchEvent({
|
|
type: 'progress',
|
|
lengthComputable: total >= 0,
|
|
loaded,
|
|
total,
|
|
});
|
|
}
|
|
|
|
// exposed for testing
|
|
__didCompleteResponse(
|
|
requestId: number,
|
|
error: string,
|
|
timeOutError: boolean,
|
|
): void {
|
|
if (requestId === this._requestId) {
|
|
if (error) {
|
|
if (this._responseType === '' || this._responseType === 'text') {
|
|
this._response = error;
|
|
}
|
|
this._hasError = true;
|
|
if (timeOutError) {
|
|
this._timedOut = true;
|
|
}
|
|
}
|
|
this._clearSubscriptions();
|
|
this._requestId = null;
|
|
this.setReadyState(this.DONE);
|
|
|
|
if (error) {
|
|
XMLHttpRequest._interceptor &&
|
|
XMLHttpRequest._interceptor.loadingFailed(requestId, error);
|
|
} else {
|
|
XMLHttpRequest._interceptor &&
|
|
XMLHttpRequest._interceptor.loadingFinished(
|
|
requestId,
|
|
this._response.length,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
_clearSubscriptions(): void {
|
|
(this._subscriptions || []).forEach(sub => {
|
|
if (sub) {
|
|
sub.remove();
|
|
}
|
|
});
|
|
this._subscriptions = [];
|
|
}
|
|
|
|
getAllResponseHeaders(): ?string {
|
|
if (!this.responseHeaders) {
|
|
// according to the spec, return null if no response has been received
|
|
return null;
|
|
}
|
|
const headers = this.responseHeaders || {};
|
|
return Object.keys(headers)
|
|
.map(headerName => {
|
|
return headerName + ': ' + headers[headerName];
|
|
})
|
|
.join('\r\n');
|
|
}
|
|
|
|
getResponseHeader(header: string): ?string {
|
|
const value = this._lowerCaseResponseHeaders[header.toLowerCase()];
|
|
return value !== undefined ? value : null;
|
|
}
|
|
|
|
setRequestHeader(header: string, value: any): void {
|
|
if (this.readyState !== this.OPENED) {
|
|
throw new Error('Request has not been opened');
|
|
}
|
|
this._headers[header.toLowerCase()] = String(value);
|
|
}
|
|
|
|
/**
|
|
* Custom extension for tracking origins of request.
|
|
*/
|
|
setTrackingName(trackingName: string): XMLHttpRequest {
|
|
this._trackingName = trackingName;
|
|
return this;
|
|
}
|
|
|
|
open(method: string, url: string, async: ?boolean): void {
|
|
/* Other optional arguments are not supported yet */
|
|
if (this.readyState !== this.UNSENT) {
|
|
throw new Error('Cannot open, already sending');
|
|
}
|
|
if (async !== undefined && !async) {
|
|
// async is default
|
|
throw new Error('Synchronous http requests are not supported');
|
|
}
|
|
if (!url) {
|
|
throw new Error('Cannot load an empty url');
|
|
}
|
|
this._method = method.toUpperCase();
|
|
this._url = url;
|
|
this._aborted = false;
|
|
this.setReadyState(this.OPENED);
|
|
}
|
|
|
|
send(data: any): void {
|
|
if (this.readyState !== this.OPENED) {
|
|
throw new Error('Request has not been opened');
|
|
}
|
|
if (this._sent) {
|
|
throw new Error('Request has already been sent');
|
|
}
|
|
this._sent = true;
|
|
const incrementalEvents =
|
|
this._incrementalEvents || !!this.onreadystatechange || !!this.onprogress;
|
|
|
|
this._subscriptions.push(
|
|
RCTNetworking.addListener('didSendNetworkData', args =>
|
|
this.__didUploadProgress(...args),
|
|
),
|
|
);
|
|
this._subscriptions.push(
|
|
RCTNetworking.addListener('didReceiveNetworkResponse', args =>
|
|
this.__didReceiveResponse(...args),
|
|
),
|
|
);
|
|
this._subscriptions.push(
|
|
RCTNetworking.addListener('didReceiveNetworkData', args =>
|
|
this.__didReceiveData(...args),
|
|
),
|
|
);
|
|
this._subscriptions.push(
|
|
RCTNetworking.addListener('didReceiveNetworkIncrementalData', args =>
|
|
this.__didReceiveIncrementalData(...args),
|
|
),
|
|
);
|
|
this._subscriptions.push(
|
|
RCTNetworking.addListener('didReceiveNetworkDataProgress', args =>
|
|
this.__didReceiveDataProgress(...args),
|
|
),
|
|
);
|
|
this._subscriptions.push(
|
|
RCTNetworking.addListener('didCompleteNetworkResponse', args =>
|
|
this.__didCompleteResponse(...args),
|
|
),
|
|
);
|
|
|
|
let nativeResponseType: NativeResponseType = 'text';
|
|
if (this._responseType === 'arraybuffer') {
|
|
nativeResponseType = 'base64';
|
|
}
|
|
if (this._responseType === 'blob') {
|
|
nativeResponseType = 'blob';
|
|
}
|
|
|
|
const doSend = () => {
|
|
const friendlyName =
|
|
this._trackingName !== 'unknown' ? this._trackingName : this._url;
|
|
this._perfKey = 'network_XMLHttpRequest_' + String(friendlyName);
|
|
GlobalPerformanceLogger.startTimespan(this._perfKey);
|
|
invariant(
|
|
this._method,
|
|
'XMLHttpRequest method needs to be defined (%s).',
|
|
friendlyName,
|
|
);
|
|
invariant(
|
|
this._url,
|
|
'XMLHttpRequest URL needs to be defined (%s).',
|
|
friendlyName,
|
|
);
|
|
RCTNetworking.sendRequest(
|
|
this._method,
|
|
this._trackingName,
|
|
this._url,
|
|
this._headers,
|
|
data,
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
|
* when making Flow check .android.js files. */
|
|
nativeResponseType,
|
|
incrementalEvents,
|
|
this.timeout,
|
|
this.__didCreateRequest.bind(this),
|
|
this.withCredentials,
|
|
);
|
|
};
|
|
if (DEBUG_NETWORK_SEND_DELAY) {
|
|
setTimeout(doSend, DEBUG_NETWORK_SEND_DELAY);
|
|
} else {
|
|
doSend();
|
|
}
|
|
}
|
|
|
|
abort(): void {
|
|
this._aborted = true;
|
|
if (this._requestId) {
|
|
RCTNetworking.abortRequest(this._requestId);
|
|
}
|
|
// only call onreadystatechange if there is something to abort,
|
|
// below logic is per spec
|
|
if (
|
|
!(
|
|
this.readyState === this.UNSENT ||
|
|
(this.readyState === this.OPENED && !this._sent) ||
|
|
this.readyState === this.DONE
|
|
)
|
|
) {
|
|
this._reset();
|
|
this.setReadyState(this.DONE);
|
|
}
|
|
// Reset again after, in case modified in handler
|
|
this._reset();
|
|
}
|
|
|
|
setResponseHeaders(responseHeaders: ?Object): void {
|
|
this.responseHeaders = responseHeaders || null;
|
|
const headers = responseHeaders || {};
|
|
this._lowerCaseResponseHeaders = Object.keys(headers).reduce(
|
|
(lcaseHeaders, headerName) => {
|
|
lcaseHeaders[headerName.toLowerCase()] = headers[headerName];
|
|
return lcaseHeaders;
|
|
},
|
|
{},
|
|
);
|
|
}
|
|
|
|
setReadyState(newState: number): void {
|
|
this.readyState = newState;
|
|
this.dispatchEvent({type: 'readystatechange'});
|
|
if (newState === this.DONE) {
|
|
if (this._aborted) {
|
|
this.dispatchEvent({type: 'abort'});
|
|
} else if (this._hasError) {
|
|
if (this._timedOut) {
|
|
this.dispatchEvent({type: 'timeout'});
|
|
} else {
|
|
this.dispatchEvent({type: 'error'});
|
|
}
|
|
} else {
|
|
this.dispatchEvent({type: 'load'});
|
|
}
|
|
this.dispatchEvent({type: 'loadend'});
|
|
}
|
|
}
|
|
|
|
/* global EventListener */
|
|
addEventListener(type: string, listener: EventListener): void {
|
|
// If we dont' have a 'readystatechange' event handler, we don't
|
|
// have to send repeated LOADING events with incremental updates
|
|
// to responseText, which will avoid a bunch of native -> JS
|
|
// bridge traffic.
|
|
if (type === 'readystatechange' || type === 'progress') {
|
|
this._incrementalEvents = true;
|
|
}
|
|
super.addEventListener(type, listener);
|
|
}
|
|
}
|
|
|
|
module.exports = XMLHttpRequest;
|