缘由
工作项目使用fetch
,暂无法提供abort
(取消请求)功能,虽然官方说可以使用:AbortSignal
对象的实例,将允许通过AbortController
与fetch
请求通信或者终止fetch,稍微复杂了也不好封装。于是将目光转回axios
(以前技术选型时不知道咋定了fetch)
原生XHR
原生xhr
提供abort
方法
xhr = new XMLHttpRequest()
xhr.open("get","xxx")
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status>=200&&xhr.status<300){
// xxx
}
}
}
xhr.abort();
axios实现abort
axios
官方提供了CancelToken
用于生成本次请求的特殊token,用于cancelToken字段,及时取消请求:
export const get = (url, params, headers, abortFunc) => {
const CancelToken = await axios.CancelToken;
const res = await axios.get(url,{
params,
cancelToken: new CancelToken(function executor(c) {
// 将executor参数传出去,供外部调用
abortFunc(c);
})
}, { headers });
return res;
}
// 使用
let ref;
get('xxx', { a: 1 }, null, abort => ref = abort);
ref.cancel()