javascript axios取消请求 亲测可以成功

const CancelToken = axios.CancelToken;
let cancel;
// 这个模拟接口写个sleep2秒 可以看到效果 
axios.get('/moban/aass', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// cancel the request
setTimeout(function(){
// 取消请求
cancel();
},300)

javascript axios取消请求 亲测可以成功

慢慢看可以理解

 

 

const CancelToken = axios.CancelToken;
// 从中获取令牌对象
const source = CancelToken.source();
console.log("source.token",source.token);
// 发请求
axios.get('/moban/aass', {
  // 传递令牌
  cancelToken: source.token
});

setTimeout(function () { 
    source.cancel();
},1000);

 

 

原理看下

    // 创建Promise，返回放行开关cancel
        function source () {
            var cancel;
            var promise = new Promise(function (resolve) {
                cancel = resolve;
            });
            return {
                cancel:cancel,
                token:promise 
            }
        }
    // 发请求
        function axios_get(config) {
            if (config.cancelToken) {
                config.cancelToken.then(function () {
                    xhr.abort();
                })
            }
        }

// 代码执行
        var source = source();

        axios_get({cancelToken:source.token});

        setTimeout(function () {
            source.cancel(); // 5秒之后执行下一步操作
        },5000)

其实原理就是把promise作为参数传入 把resolve 赋予变量 这个resolve就是取消请求的