Request Adapter

Remember how to create an Alova instance?

import adapterFetch from 'alova/fetch';

const alovaInstance = createAlova({
  // ...
  requestAdapter: adapterFetch()
});

requestAdapter is the request adapter. The internal request sending and receiving will rely on the request adapter. alova/fetch manages requests through the fetch api. In most cases, we can use it. However, when alova runs in an environment where the fetch api is not available (such as app, mini program), you need to replace a request adapter that supports the current environment.

So how should you customize a request adapter? It's very simple. It is actually a function that will be called every time a request is initiated and returns an object. This object contains request-related data sets such as url, method, data, headers, timeout, etc. Although there are many fields, we only need to access the data we need.

Request adapter structure

The request adapter will receive request-related parameters and the method instance currently being requested, and return a response-related function set.

function CustomRequestAdapter(requestElements, methodInstance) {
  // Send the request here...

  return {
    async response() {
      // Return response data
    },
    async headers() {
      // Asynchronous function that returns the response header
    },
    abort() {
      // Interrupt the request, this function will be triggered when abort is called externally
    },
    onDownload(updateDownloadProgress) {
      // Download progress information, updateDownloadProgress is continuously called internally to update the download progress
    },
    onUpload(updateUploadProgress) {
      // Upload progress information, updateUploadProgress is continuously called internally to update the upload progress
    }
  };
}

Request parameter details

requestElements

Send the relevant elements of the request, including the following data.

interface RequestElements {
  // Request url, get parameters are already included
  readonly url: string;

  // Request type, such as GET, POST, PUT, etc.
  readonly type: MethodType;

  // Request header information, object
  readonly headers: Arg;

  // Request body information
  readonly data?: RequestBody;
}

methodInstance

The method instance of the current request

Return parameter details

response (required)

An asynchronous function, the function returns a response value, which will be passed to the global response interceptor (responded);

headers (required)

An asynchronous function, the response header object returned by the function will be passed to the transform of the Method instance Conversion hook function;

abort (required)

A normal function, which is used to interrupt the request. All interrupt requests will eventually call this function to execute;

onDownload (optional)

A normal function, which receives a callback function to update the download progress. The frequency of progress update is customized in this function. In this example, it is simulated to update every 100 milliseconds. The updateDownloadProgress callback function receives two parameters, the first parameter is the total size, and the second parameter is the downloaded size;

onUpload (optional)

A normal function, which receives a callback function to update the upload progress. The frequency of progress update is customized in this function. In this example, it is simulated to update every 100 milliseconds. The updateUploadProgress callback function receives two parameters, the first parameter is the total size, and the second parameter is the uploaded size;

XMLHttpRequest request adapter example

The following is an example of an adapter that sends a request through XMLHttpRequest. It is mainly used to demonstrate the writing of the adapter. The code is incomplete and cannot be run.

function XMLHttpRequestAdapter(requestElements, methodInstance) {
  // Deconstruct the data needed
  const { url, type, data, headers } = config;

  // Send request
  const xhr = new XMLHttpRequest();
  xhr.open(type, url);
  for (const key in headers) {
    xhr.setRequestHeader(key, headers[key]);
  }
  const responsePromise = new Promise((resolve, reject) => {
    xhr.addEventListener('load', event => {
      // Process response data
      resolve(/* ... */);
    });
    xhr.addEventListener('error', event => {
      // Process request error
      reject(/* ... */);
    });
  });

  xhr.send(JSON.stringify(data));

  return {
    // Asynchronous function that returns response data
    response: () => responsePromise,

    // Asynchronous function that returns the response header
    headers: () => responsePromise.then(() => xhr.getAllResponseHeaders()),
    abort: () => {
      xhr.abort();
    },

    // Download progress information, continuously call updateDownloadProgress internally to update the download progress
    onDownload: updateDownloadProgress => {
      xhr.addEventListener('progress', event => {
        // Data receiving progress
        updateDownloadProgress(event.total, event.loaded);
      });
    },

    // Upload progress information, continuously call updateUploadProgress internally to update the upload progress
    onUpload: updateUploadProgress => {
      xhr.upload.onprogress = event => {
        updateUploadProgress(event.total, event.loaded);
      };
    }
  };
}

note

For more complete request adapter details, please refer to alova/fetch Source code to understand.

Request adapter type

The global beforeRequest, responded interceptors, and the types of configuration objects when creating method instances are automatically inferred based on the types provided by the request adapter. The following is the type of alova/fetch.

import type { AlovaRequestAdapter } from 'alova';

export type adapterFetch = () => AlovaRequestAdapter<FetchRequestInit, Response, Headers>;

The generic parameters in AlovaRequestAdapter are values ​​of three types: RequestConfig, Response, and ResponseHeader, which are automatically inferred to the types given by the request adapter in global interceptors, method instance configurations, etc.

They are represented as follows:

• RequestConfig: request configuration object type, which will be applied to the config parameter when the method is created.
• Response: response type, for example, alova/fetch is the Response type
• ResponseHeader: response header object type