js implements axios limit request queue

The background is:

In actual development, you may encounter network problems or a large number of queries, and the user may initiate the next request before the previous request is completed.

What will happen?

However, sending the same request multiple times to the server will undoubtedly put pressure on the server, so it is necessary to limit requests on the front end after optimizing the server query speed and when the user's network conditions are poor.

The cancelToken that comes with axios can help us achieve this requirement, and provides us with a ready-made api axios.CancelToken, which is a callback function whose return value is a request information. We can execute this callback function when we need to cancel. The specific implementation is as follows:

const service = axios.create({});
const penddingMap = new Map();
const addPendding = (config) => {
 config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
  if (!penddingMap.has(config.url)){
   penddingMap.set(config.url,cancel);
  }
 })
}

const removePendding = (config) => {
 if (penddingMap.has(config.url)){
  let cancel = penddingMap.get(config.url);
    cancel(config.url);
    penddingMap.delete(config.url)
 }
}

A Map is maintained locally to store each request information. In addPendding, it will first determine whether there is a cancelToken. If there is, there is no need to recreate a cancelToken. In removePendding, it is determined whether the request information is in the Map. If the request exists in the Map, the cancel function is executed and the request in the Map is deleted.

Specific application in interceptor:

service.interceptors.request.use(config => {
 removePending(config) // If it exists in the Map, cancel the request first addPendding(config) // Add the request to the Map return config
})

service.interceptors.response.use(response => {
 ``` // some code
  return response.data
}, error => {
 // Capture cancel request and throw if(error instanceof Cancel){
    error.message = 'The previous request has not yet ended, please wait~';
    Message.error(error.message);
    return Promise.reject(error.response) 
  // Pay attention to the throw here, call try-catch to capture it when requesting})
)

Once the interception is successful here, multiple requests with large traffic can be limited.

This is just an example. You can also control whether the user initiates a request by judging the button logic.

This is the end of this article about js implementing axios limiting request queue. For more relevant js axios limiting request queue content, 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!