feat(adapter): add fetch adapter; (#6371)

.github/workflows/ci.yml

@@ -15,7 +15,8 @@ jobs:
 
  strategy:
  matrix:
- node-version: [12.x, 14.x, 16.x, 18.x, 20.x]
+ node-version: [12.x, 14.x, 16.x, 18.x, 20.x, 21.x]
+ fail-fast: false
 
  steps:
  - uses: actions/checkout@v3

index.d.cts

@@ -268,7 +268,8 @@ declare namespace axios {
  | 'document'
  | 'json'
  | 'text'
- | 'stream';
+ | 'stream'
+ | 'formdata';
 
  type responseEncoding =
  | 'ascii' | 'ASCII'
@@ -353,11 +354,12 @@ declare namespace axios {
  upload?: boolean;
  download?: boolean;
  event?: BrowserProgressEvent;
+ lengthComputable: boolean;
  }
 
  type Milliseconds = number;
 
- type AxiosAdapterName = 'xhr' | 'http' | string;
+ type AxiosAdapterName = 'fetch' | 'xhr' | 'http' | string;
 
  type AxiosAdapterConfig = AxiosAdapter | AxiosAdapterName;
 
@@ -415,6 +417,7 @@ declare namespace axios {
  lookup?: ((hostname: string, options: object, cb: (err: Error | null, address: LookupAddress | LookupAddress[], family?: AddressFamily) => void) => void) |
  ((hostname: string, options: object) => Promise<[address: LookupAddressEntry | LookupAddressEntry[], family?: AddressFamily] | LookupAddress>);
  withXSRFToken?: boolean | ((config: InternalAxiosRequestConfig) => boolean | undefined);
+ fetchOptions?: Record<string, any>;
  }
 
  // Alias

index.d.ts

@@ -209,7 +209,8 @@ export type ResponseType =
  | 'document'
  | 'json'
  | 'text'
- | 'stream';
+ | 'stream'
+ | 'formdata';
 
 export type responseEncoding =
  | 'ascii' | 'ASCII'
@@ -294,11 +295,12 @@ export interface AxiosProgressEvent {
  upload?: boolean;
  download?: boolean;
  event?: BrowserProgressEvent;
+ lengthComputable: boolean;
 }
 
 type Milliseconds = number;
 
-type AxiosAdapterName = 'xhr' | 'http' | string;
+type AxiosAdapterName = 'fetch' | 'xhr' | 'http' | string;
 
 type AxiosAdapterConfig = AxiosAdapter | AxiosAdapterName;
 
@@ -356,6 +358,7 @@ export interface AxiosRequestConfig<D = any> {
  lookup?: ((hostname: string, options: object, cb: (err: Error | null, address: LookupAddress | LookupAddress[], family?: AddressFamily) => void) => void) |
  ((hostname: string, options: object) => Promise<[address: LookupAddressEntry | LookupAddressEntry[], family?: AddressFamily] | LookupAddress>);
  withXSRFToken?: boolean | ((config: InternalAxiosRequestConfig) => boolean | undefined);
+ fetchOptions?: Record<string, any>;
 }
 
 // Alias

lib/adapters/adapters.js

@@ -1,11 +1,13 @@
 import utils from '../utils.js';
 import httpAdapter from './http.js';
 import xhrAdapter from './xhr.js';
+import fetchAdapter from './fetch.js';
 import AxiosError from "../core/AxiosError.js";
 
 const knownAdapters = {
  http: httpAdapter,
- xhr: xhrAdapter
+ xhr: xhrAdapter,
+ fetch: fetchAdapter
 }
 
 utils.forEach(knownAdapters, (fn, value) => {

lib/adapters/fetch.js

@@ -0,0 +1,197 @@
+import platform from "../platform/index.js";
+import utils from "../utils.js";
+import AxiosError from "../core/AxiosError.js";
+import composeSignals from "../helpers/composeSignals.js";
+import {trackStream} from "../helpers/trackStream.js";
+import AxiosHeaders from "../core/AxiosHeaders.js";
+import progressEventReducer from "../helpers/progressEventReducer.js";
+import resolveConfig from "../helpers/resolveConfig.js";
+import settle from "../core/settle.js";
+
+const fetchProgressDecorator = (total, fn) => {
+ const lengthComputable = total != null;
+ return (loaded) => setTimeout(() => fn({
+ lengthComputable,
+ total,
+ loaded
+ }));
+}
+
+const isFetchSupported = typeof fetch !== 'undefined';
+
+const supportsRequestStreams = isFetchSupported && (() => {
+ let duplexAccessed = false;
+
+ const hasContentType = new Request(platform.origin, {
+ body: new ReadableStream(),
+ method: 'POST',
+ get duplex() {
+ duplexAccessed = true;
+ return 'half';
+ },
+ }).headers.has('Content-Type');
+
+ return duplexAccessed && !hasContentType;
+})();
+
+const DEFAULT_CHUNK_SIZE = 64 * 1024;
+
+const resolvers = {
+ stream: (res) => res.body
+};
+
+isFetchSupported && ['text', 'arrayBuffer', 'blob', 'formData'].forEach(type => [
+ resolvers[type] = utils.isFunction(Response.prototype[type]) ? (res) => res[type]() : (_, config) => {
+ throw new AxiosError(`Response type ${type} is not supported`, AxiosError.ERR_NOT_SUPPORT, config);
+ }
+])
+
+const getBodyLength = async (body) => {
+ if(utils.isBlob(body)) {
+ return body.size;
+ }
+
+ if(utils.isSpecCompliantForm(body)) {
+ return (await new Request(body).arrayBuffer()).byteLength;
+ }
+
+ if(utils.isArrayBufferView(body)) {
+ return body.byteLength;
+ }
+
+ if(utils.isURLSearchParams(body)) {
+ body = body + '';
+ }
+
+ if(utils.isString(body)) {
+ return (await new TextEncoder().encode(body)).byteLength;
+ }
+}
+
+const resolveBodyLength = async (headers, body) => {
+ const length = utils.toFiniteNumber(headers.getContentLength());
+
+ return length == null ? getBodyLength(body) : length;
+}
+
+export default async (config) => {
+ let {
+ url,
+ method,
+ data,
+ signal,
+ cancelToken,
+ timeout,
+ onDownloadProgress,
+ onUploadProgress,
+ responseType,
+ headers,
+ withCredentials = 'same-origin',
+ fetchOptions
+ } = resolveConfig(config);
+
+ responseType = responseType ? (responseType + '').toLowerCase() : 'text';
+
+ let [composedSignal, stopTimeout] = (signal || cancelToken || timeout) ?
+ composeSignals([signal, cancelToken], timeout) : [];
+
+ let finished, request;
+
+ const onFinish = () => {
+ !finished && setTimeout(() => {
+ composedSignal && composedSignal.unsubscribe();
+ });
+
+ finished = true;
+ }
+
+ try {
+ if (onUploadProgress && supportsRequestStreams && method !== 'get' && method !== 'head') {
+ let requestContentLength = await resolveBodyLength(headers, data);
+
+ let _request = new Request(url, {
+ method,
+ body: data,
+ duplex: "half"
+ });
+
+ let contentTypeHeader;
+
+ if (utils.isFormData(data) && (contentTypeHeader = _request.headers.get('content-type'))) {
+ headers.setContentType(contentTypeHeader)
+ }
+
+ data = trackStream(_request.body, DEFAULT_CHUNK_SIZE, fetchProgressDecorator(
+ requestContentLength,
+ progressEventReducer(onUploadProgress)
+ ));
+ }
+
+ if (!utils.isString(withCredentials)) {
+ withCredentials = withCredentials ? 'cors' : 'omit';
+ }
+
+ request = new Request(url, {
+ ...fetchOptions,
+ signal: composedSignal,
+ method,
+ headers: headers.normalize().toJSON(),
+ body: data,
+ duplex: "half",
+ withCredentials
+ });
+
+ let response = await fetch(request);
+
+ const isStreamResponse = responseType === 'stream' || responseType === 'response';
+
+ if (onDownloadProgress || isStreamResponse) {
+ const options = {};
+
+ Object.getOwnPropertyNames(response).forEach(prop => {
+ options[prop] = response[prop];
+ });
+
+ const responseContentLength = utils.toFiniteNumber(response.headers.get('content-length'));
+
+ response = new Response(
+ trackStream(response.body, DEFAULT_CHUNK_SIZE, onDownloadProgress && fetchProgressDecorator(
+ responseContentLength,
+ progressEventReducer(onDownloadProgress, true)
+ ), isStreamResponse && onFinish),
+ options
+ );
+ }
+
+ responseType = responseType || 'text';
+
+ let responseData = await resolvers[utils.findKey(resolvers, responseType) || 'text'](response, config);
+
+ !isStreamResponse && onFinish();
+
+ stopTimeout && stopTimeout();
+
+ return await new Promise((resolve, reject) => {
+ settle(resolve, reject, {
+ data: responseData,
+ headers: AxiosHeaders.from(response.headers),
+ status: response.status,
+ statusText: response.statusText,
+ config,
+ request
+ })
+ })
+ } catch (err) {
+ onFinish();
+
+ let {code} = err;
+
+ if (err.name === 'NetworkError') {
+ code = AxiosError.ERR_NETWORK;
+ }
+
+ throw AxiosError.from(err, code, config, request);
+ }
+}
+
+