axios本请求被取消后，如何再次唤醒请求

Question

部分代码如下：

const axiosAPI = axios.create({
  baseURL: GlobalPath.ajaxurl,
  timeout: 8000,
  responseType: "json",
  withCredentials: false,
  validateStatus: function (status) {
    return (status >= 200 && status < 300) || status == 304
  },
  cancelToken: new axios.CancelToken(function (c) {
    cancel = c  
  }),

});



axiosAPI.interceptors.request.use(config => {
  let startTime = +new Date();
  
  if (axiosPromiseObj[config.url] && deepCompare(config.data,axiosPromiseObj["data"]) && startTime - endTime < 500){
    axiosPromiseObj[config.url](); //执行取消请求操作
    axiosPromiseObj[config.url] = cancel;
 
   } else {
    axiosPromiseObj[config.url] = cancel; 
    axiosPromiseObj["data"] = config.data; 
   
  }
}

发送网络请求，做了避免重复点击的处理，如果500ms内重复点击了就取消本次请求（deepCompare深度比较了两次数据是否一致），问题是：当取消了本次请求后，发现以后所有的请求都不管用了。请大神帮忙解答下，十分感谢！### 问题描述

Answer 1

你用的是同一个cancel
这个cancel只能用一次 用第二次要重新 new 你这个后面用的都是前一个用过的 直接抛异常了

可以做一个类似的封装

let urlTimer = {}

function _axios(config) {
    return new Promise(function (resolve,reject) {
        clearTimeout(urlTimer[config.url]);
        urlTimer[config.url] = setTimeout(function () {
            axios(config).then(resolve,reject)
        }, 500)
    })
}

_axios({url:"/123"})
_axios({url:"/123"})

_axios({url:"/567"})

Answer 2

我觉得避免重复提交应该是做防抖操作，而不是取消请求

Answer 3

这样写可以：

axiosAPI.interceptors.request.use(config => {
    let startTime = +new Date();
    config.cancelToken = new axios.CancelToken(function (c) {
        cancel = c;
    });

    if (axiosPromiseObj['url'] === config.url && deepCompare(config.data,axiosPromiseObj["data"]) &&
          startTime - endTime < 500){
          cancelRequest();
    } else {
        axiosPromiseObj['url'] = config.url
        axiosPromiseObj["data"] = config.data;
    }
}

这样写不可以：

axiosAPI.interceptors.request.use(config => {
  let startTime = +new Date();
  config.cancelToken = new axios.CancelToken(function (c) {
       cancel = c;
   });
  if (axiosPromiseObj[config.url] && deepCompare(config.data,axiosPromiseObj["data"]) && startTime - endTime < 500){
    axiosPromiseObj[config.url]();
    axiosPromiseObj[config.url] = cancel;
 
   } else {
    axiosPromiseObj[config.url] = cancel; 
    axiosPromiseObj["data"] = config.data; 
   
  }

没天理啊....

Answer 4

我也遇到了同样问题 大佬你怎么觉得的

我的代码

export default class HttpUtil {
    static post(url, bodyParam = '') {
        return new Promise((resolve, reject) => {
            server.post(url, JSON.stringify(bodyParam), {cancelToken: source.token})
                .then(res => {
                    resolve(res);
                })
                .catch(err => {
                    console.log(`${url}:请求失败，错误:${JSON.stringify(err)}`)
                    if (err.code && err.code == 'ECONNABORTED') {
                        return reject({message: '请求超时'})
                    } else if (err && err.response && err.response.status == 403) {
                        //登录过期之后，清空app内保存的信息
                        DeviceEventEmitter.emit('403')
                        return reject({message: '登录已过期，请重新登录', errCode: '403'})
                    } else if (err.message == 'Cancel Http') {//操作被取消
                        return reject({errType: 1})
                    } else {
                        return reject({message: '网络连接失败,请检查你的网络'})
                    }
                })
        });
    }


    static cancelTask() {
        source.cancel('Cancel Http');
    }
}