Axios anti-duplicate submission

Scenes

The user is performing a new operation (such as adding a menu). If you click the Add button multiple times quickly, it may happen that multiple records are added. Generally, you can first disable the new button when you click it, and then unlock it after this operation is completed. However, there is a more elegant way to implement it using axios.

Axios anti-duplicate submission

train of thought

Let me talk about the idea first: when performing the axios submission operation, mark this request and save it in an array. When the request is over, remove the request tag from this array. Therefore, if there are two identical requests, then subsequent requests will find that the mark already exists in this array, and then cancel this request in axios.

Implementation

In my code, axios has been uniformly encapsulated in http.js, so it only needs to be implemented in http.js: first
define an array to store the request tag, and define a cancel axios request Object:

// 请求列表(防重复提交)
let requestList = [];
let cancelToken = axios.CancelToken;

Then determine the request tag: here I use the requested url + request parameter + request method, combined into a string, as the request tag, in the request interceptor, the code is as follows:

axios.interceptors.request.use(
    config => {
    
    

        //防止重复提交（如果本次是重复操作，则取消，否则将该操作标记到requestList中）
        config.cancelToken = new cancelToken((cancel) => {
    
    
            let requestFlag = JSON.stringify(config.url) + JSON.stringify(config.data) + '&' + config.method;
            if (requestList.includes(requestFlag)) {
    
    //请求标记已经存在，则取消本次请求，否则在请求列表中加入请求标记
                cancel();//取消本次请求
            } else {
    
    
                requestList.push(requestFlag);
            }
        });

        return config;
    },
    error => {
    
    
        return Promise.reject(err);
    }
);

Finally, at the end of the request, please request that the mark be removed. In the response interceptor, the code is as follows:

axios.interceptors.response.use(
    response => {
    
    
        //请求返回后，将请求标记从requestList中移除
        let requestFlag = JSON.stringify(response.config.url) + JSON.stringify(response.config.data) + '&' + response.config.method;
        requestList.splice(requestList.findIndex(item => item === requestFlag), 1);

        return response;
    },
    error => {
    
    
        //置空请求列表
        requestList.length = 0;
        
        return Promise.reject(error)
    }
)

Replenish

If in the system, there are really two requests with the same url, parameters, and request methods, and a request to the backend in an operation of the user (I have never encountered such a situation), this method There is also a solution. In the above introduction, the request tag is used in the following way: url+request parameter+request method. Then in the request parameter at this time, it is enough to add a special parameter. Of course, this parameter is only to prevent repeated submissions, and the determination of the request mark has no other effect. Of course, you can also think of another way to implement this request mark. In short, this kind of demand will hardly appear.