Axios cancels repeated requests

Preface

In the process of Web project development, we often encounter scenarios of repeated requests. If the system does not handle repeated requests, various problems may occur in the system. For example, repeated post requests may result in two records being generated on the server side. So how do duplicate requests occur? Here we give two common scenarios:

• Suppose there is a button on the page, and when the user clicks the button, an AJAX request will be initiated. If the button is not controlled, repeated requests will be made if the user clicks the button quickly.
• Suppose that on the test result query page, users can query the test results based on three query conditions: "Passed", "Failed" and "All". If the request response is slow, repeated requests will be generated when the user quickly switches between different query conditions.
  

Now that we know how duplicate requests are generated, we also know that they can cause some problems. Next, Brother Abao will take Axios as an example to show you how to solve the problem of duplicate requests.

1. How to cancel a request

Axios is a Promise-based HTTP client that supports both browsers and Node.js environments. It is an excellent HTTP client and is widely used in a large number of Web projects. For the browser environment, the underlying layer of Axios uses the XMLHttpRequest object to initiate HTTP requests. If we want to cancel the request, we can cancel the request by calling the abort method on the XMLHttpRequest object:

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://developer.mozilla.org/", true);
xhr.send();
setTimeout(() => xhr.abort(), 300);

As for Axios, we can cancel the request through the CancelToken provided by Axios:

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.post('/user/12345', {
  name: 'semlinker'
}, {
  cancelToken: source.token
})

source.cancel('Operation canceled by the user.'); // Cancel request, parameter is optional

In addition, you can also create a CancelToken by calling the CancelToken constructor, as shown below:

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});

cancel(); // Cancel request

Now that we know how to use CancelToken to cancel a request in Axios, how does CancelToken work internally? Let’s remember this question here first, and Brother Abao will reveal the secret behind CancelToken to you later. Next, let's analyze how to determine duplicate requests.

2. How to determine duplicate requests

When the request method, request URL address and request parameters are the same, we can consider the requests to be the same. Therefore, each time a request is made, we can generate a unique key based on the request method, request URL address and request parameters of the current request, and create a dedicated CancelToken for each request, and then save the key and cancel function as a key-value pair in a Map object. The advantage of using Map is that it can quickly determine whether there are repeated requests:

import qs from 'qs'

const pendingRequest = new Map();
// GET -> params; POST -> data
const requestKey = [method, url, qs.stringify(params), qs.stringify(data)].join('&'); 
const cancelToken = new CancelToken(function executor(cancel) {
  if(!pendingRequest.has(requestKey)){
    pendingRequest.set(requestKey, cancel);
  }
})

When duplicate requests occur, we can use the cancel function to cancel the previously issued request. After canceling the request, we also need to remove the canceled request from pendingRequest. Now that we know how to cancel a request and how to detect duplicate requests, let's look at how to cancel duplicate requests.

3. How to cancel repeated requests

Because we need to process all requests, we can consider using Axios's interceptor mechanism to implement the function of canceling duplicate requests. Axios provides developers with request interceptors and response interceptors, which have the following functions:

• Request interceptor: The function of this type of interceptor is to perform certain operations uniformly before the request is sent, such as adding a token field to the request header.
• Response interceptor: The function of this type of interceptor is to uniformly perform certain operations after receiving the server response. For example, if the response status code is 401, it will automatically jump to the login page.
  

3.1 Defining auxiliary functions

Before configuring the request interceptor and response interceptor, let's define three auxiliary functions:

generateReqKey: used to generate a request Key based on the current request information;
function generateReqKey(config) {
  const { method, url, params, data } = config;
  return [method, url, Qs.stringify(params), Qs.stringify(data)].join("&");
}

addPendingRequest: used to add the current request information to the pendingRequest object;

const pendingRequest = new Map();
function addPendingRequest(config) {
  const requestKey = generateReqKey(config);
  config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
    if (!pendingRequest.has(requestKey)) {
       pendingRequest.set(requestKey, cancel);
    }
  });
}

removePendingRequest: Checks whether there is a duplicate request, and cancels the sent request if so.

function removePendingRequest(config) {
  const requestKey = generateReqKey(config);
  if (pendingRequest.has(requestKey)) {
     const cancelToken = pendingRequest.get(requestKey);
     cancelToken(requestKey);
     pendingRequest.delete(requestKey);
  }
}

After creating the generateReqKey, addPendingRequest, and removePendingRequest functions, we can set up the request interceptor and response interceptor.

3.2 Setting up a request interceptor

axios.interceptors.request.use(
  function (config) {
    removePendingRequest(config); // Check if there is a duplicate request. If so, cancel the sent request addPendingRequest(config); // Add the current request information to the pendingRequest object return config;
  },
  (error) => {
     return Promise.reject(error);
  }
);

3.3 Setting up a response interceptor

axios.interceptors.response.use(
  (response) => {
     removePendingRequest(response.config); //Remove request from pendingRequest object return response;
   },
   (error) => {
      removePendingRequest(error.config || {}); // Remove the request from the pendingRequest object if (axios.isCancel(error)) {
        console.log("Cancelled duplicate request: " + error.message);
      } else {
        // Add exception handling }
      return Promise.reject(error);
   }
);

Since the complete example code is quite long, I will not post the specific code. If you are interested, you can visit the following address to browse the sample code.

Full example code: https://gist.github.com/semlinker/e426780664f0186db434882f1e27ac3a

Here we take a look at the results of the Axios cancel duplicate request example:

As can be seen from the above figure, when duplicate requests occur, the previously sent and uncompleted requests will be canceled. Below we use a flowchart to summarize the process of canceling duplicate requests:

Finally, let's answer the question left above, that is, how does CancelToken work internally?

4. How CancelToken works

In the previous example, we created a CancelToken object by calling the CancelToken constructor:

new axios.CancelToken((cancel) => {
  if (!pendingRequest.has(requestKey)) {
    pendingRequest.set(requestKey, cancel);
  }
})

So next, let's analyze the CancelToken constructor, which is defined in the lib/cancel/CancelToken.js file:

// lib/cancel/CancelToken.js
function CancelToken(executor) {
  if (typeof executor !== 'function') {
    throw new TypeError('executor must be a function.');
  }

  var resolvePromise;
  this.promise = new Promise(function promiseExecutor(resolve) {
    resolvePromise = resolve;
  });

  var token = this;
  executor(function cancel(message) { // Set the cancel object if (token.reason) {
      return; // Cancellation has already been requested
    }
    token.reason = new Cancel(message);
    resolvePromise(token.reason);
  });
}

From the above code, we can see that the cancel object is a function. When we call this function, a Cancel object will be created and the resolvePromise method will be called. After this method is executed, the state of the promise object pointed to by the promise property on the CancelToken object will become resolved. So what is the purpose of doing this? Here we found the answer from the lib/adapters/xhr.js file:

// lib/adapters/xhr.js 
if (config.cancelToken) {
  config.cancelToken.promise.then(function onCanceled(cancel) {
    if (!request) { return; }
    request.abort(); // Cancel request reject(cancel);
    request = null;
  });
}

After reading the above content, some friends may not understand the working principle of CancelToken, so Abao brother drew another picture to help everyone understand the working principle of CancelToken:

V. Conclusion

This article introduces how to cancel repeated requests in Axios and how CancelToken works. In subsequent articles, Abao Ge will introduce how to set up data caching in Axios. Interested friends should not miss it. If you want to learn about the design and implementation of HTTP interceptors and HTTP adapters in Axios, you can read the article What are the things worth learning from the 77.9K Axios project.

This is the end of this article about Axios canceling duplicate requests. For more information about Axios canceling duplicate requests, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

6. Reference Resources

• Github - Axios
• MDN - XMLHttpRequest
• What are the things worth learning from the 77.9K Axios project?