axios中取消请求的简易实现

axios中取消请求有两种使用方式：

1：

let cancel
const CancelToken = axios.CancelToken;

axios('a/b.js', {
    cancelConfig: new CancelToken((c)=>{
        cancel = c
    }) // 一个promise
})

cancel()

2:

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

先实现一个简易axios

function axios(url, config){
    return new Promise((resolve, reject)=>{
        const xhr = new XMLHttpRequest();
        xhr.open(config.method || "GET",url);
        xhr.responseType = config.responseType || "json";
        xhr.onload= ()=>{
            if(xhr.readyState === 4 && xhr.status === 200){
                resolve(xhr.response);
            } else {
                reject(xhr)
            }
        }
        // 如果存在 cancelToken 参数
        if(config.cancelToken){
            config.cancelToken.then(reason =>{
                // xhr.abort() 终止发送任务
                xhr.abort();
                // reject() 走reject方法
                reject(reason)
            })
        }
        xhr.send(config.data ? JSON.stringify(config.data) : null)
    })
}

CancelToken类的实现

把resolve方法暴露出去，并返回这个promise

function CancelToken(executor){
    let cancel = ()=>{};
    const promise = new Promise(resolve => cancel = resolve);
    executor(cancel);
    return promise;
}

第二种用法使用了source:

CancelToken.source = function(){
    let cancel = ()=>{};
    const token = new CancelToken(c=>cancel = c)
    return {
        token,
        cancel
    }
}