123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622 |
- /**
- * 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;
|