ES6 - Axios 全局设置取消请求及中断 Promise 调用链

简介: ES6 - Axios 全局设置取消请求及中断 Promise 调用链
// 获取CancelToken
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// http request 拦截器
axios.interceptors.request.use(
  (config) => {
    // 全局添加cancelToken
    newConfig.cancelToken = source.token;
    return newConfig;
  },
  (err) => {
    const error = err;
    return Promise.reject(error);
  }
);
// http response 拦截器
axios.interceptors.response.use((response) => {
  const code = response.data.code;
  if (code == '002') {
    // 某个请求的响应满足特定条件的情况下,取消【其他正在进行的请求】
    source.cancel();
  }
  return Promise.resolve(response.data);
}, 
(error) => {
  if (axios.isCancel(error)) { // 取消请求的情况下,终端Promise调用链
    return new Promise(() => {});
  } else {
    return Promise.reject(error);
  }
});

Ps1:source.cancel():取消的是其他正在进行的请求,而不是中断自己的拦截器请求,所以该代码只有在有其他请求出现的时候,才会生效,否则不起作用,如果放在请求的 then 方法体内也不起作用,因为人家请求都已经完成了才进到 then 或 catch 里,已经不在你(source.cancel)的作用范围里了。


Ps2:return new Promise(() => {}):核心代码,可以中断自己本身,如拦截器请求。


目录
相关文章
|
28天前
|
JSON 前端开发 JavaScript
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
15 2
|
8天前
|
API
使用axios发送请求的格式是什么?示例代码
使用axios发送请求的格式是什么?示例代码
12 0
|
8天前
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
8 0
|
28天前
|
JavaScript
axios拦截器:每次请求自动带上 token
axios拦截器:每次请求自动带上 token
14 0
|
28天前
|
前端开发 JavaScript 数据格式
vue3中axios添加请求和响应的拦截器
vue3中axios添加请求和响应的拦截器
17 1
|
28天前
|
前端开发 JavaScript
ES6:Promise使用方法解析大全
ES6:Promise使用方法解析大全
|
28天前
|
存储 算法 JavaScript
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
今天这篇文章,主要是讲述对axios封装的请求,由于部分请求可能存在延时的情况。使得接口可能存在会被持续点击(即:接口未响应的时间内,被持续请求),导致重复请求的问题,容易降低前后端服务的性能!故提出给axios封装的配置里面,新增一个防抖函数,用来限制全局请求的防抖。
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
|
28天前
axios中的get带参数的请求方法
axios中的get带参数的请求方法
|
28天前
|
JavaScript 数据格式
Vue axios请求拦截和相应拦截
Vue axios请求拦截和相应拦截
32 2