axios.CancelToken的原理

2022-11-03 152 阅读1分钟

《用得上的前端知识》系列 - 你我都很忙，能用100字说清楚，绝不写万字长文

实现原理

axios 的使用

axios 的使用方法 - 1

let CancelToken = axios.CancelToken;
let cancel;

axios.get('/data', {
    params: {xxx},
    cancelToken : new CancelToken(c=>{
        cancel = c;
    })
});

cancel(); //取消请求

axios 的使用方法 - 2

let CancelToken = axios.CancelToken;
let source = CancelToken.source(); //source ==> {token, cancel}

axios.get('/data', {
    params: {xxx},
    cancelToken : source.token //token 是一个 promise 对象
});

source.cancel('Some reason'); //取消请求

CancelToken 方法的实现

// 只展示核心代码，以便于了解整体结构
function CancelToken( excutor ){
    const promiseResolve;

    this.promise = new Promise(resolve=>{
        promiseResolve = resolve;
    });

    const cancel = ()=>{
      promiseResolve();
    }

    excutor( cancel );
}

CancelToken.source 的实现

CancelToken.source = ()=>{
  let cancel;
  let token = new CancelToken(c=>{
    cancel = c;
  });

  return {
    token,
    cancel
  }
}

取消请求的实现

// 取消请求的实现（只展示核心代码）
let xhr = new XMLHttpRequest();

xhr.open(...);

if( config.cancelToken ){
  config.cancelToken.promise.then(()=>{
    xhr.abord();
    xhr = null;
  });
}

原理总结

首先，创建一个 promise 对象，通过配置参数 cancelToken 传给 axios对象；
同时将 promise 的 resolve 方法暴露出来，用于执行 promise；
在 axios 内部，发送完 xhr 请求后，通过 promise.then 方法执行 xhr.abort() 终止请求；
当在外部调用 resolve 方法时，xhr.abort() 就会被执行，请求就被取消了。

参考资料