axios CancelToken 实现对特定请求的拦截，不要所有请求都进行相同的拦截

周永鹏

前言

一旦给 axios 添加了拦截器，就会对所有的 post、get 等请求进行拦截。但不是所有的请求都需要进行拦截，如公共的请求，即不需要用户登录即可发起请求的 api 我们应当放行。

• 通过 axios.interceptors.request.eject(requestId) 清除 request 或者 response 的拦截器。想要再次恢复就需要重新创建拦截器。
  
• 第二种通过 axios.CancelToken.source() 更加灵活地处理需拦截的逻辑，如只需要拦截没有登录的请求，不需要所有请求都需要登录，并可处理本次的错误消息。
  

axios CancelToken

• 创建 axios.CancelToken.source() CancelToken 的实例。
  
• 在拦截器中或者其他任何地方通过 CancelToken 提供的 cancel 函数取消本次请求，并提供错误消息。
  

1. import axios from "axios";
3. const axiosInstance = axios.create({
4.   baseURL: "http://localhost:9000/api/v1"
5. });
7. // 将 cancelSource 挂载到 axiosInstance 实例上
8. axiosInstance.cancelSource = axios.CancelToken.source();
9. // isCancel 是判断当前错误是否为主动取消拦截器的错误，同样挂载到 axios 实例上
10. axiosInstance.isCancel = axios.isCancel;
12. axiosInstance.interceptors.request.use(
13.   config => {
14.     if (!localStorage.getItem("userId")) {
15.       // 用户没有登陆，停止添加了 cancelToken 的请求，并给出本次请求失败的错误消息
16.       axiosInstance.cancelSource.cancel("您没有登陆，本次操作取消！");
17.     }
18.    
19.     // 其他拦截的业务逻辑，如拦截一次性请求发了很多次等。可见 CancelToken 很灵活
21.     return config;
22.   },
23.   error => {
24.     return Promise.reject(error);
25.   }
26. );
28. axiosInstance.interceptors.request.use(
29.   config => {
30.     return config;
31.   },
32.   error => {
33.     return Promise.reject(error);
34.   }
35. );
37. export { axiosInstance };

复制代码

针对特定请求的拦截

• 在本次请求中，需要验证用户是否登录，因此在请求配置项中添加 { cancelToken: axiosInstance.cancelSource.token }。
  
• 程序发起请求之后，经过请求的拦截器。
  
• 若没有登陆，取消本次请求，并进入 catch 块，处理错误。
  
• 若登录，不取消本次请求，请求可以完整执行。
  

1. export async function setCollection(bodyData) {
2.   try {
3.     const { data: completed } = await axiosInstance.post(
4.       "/set/collection",
5.       bodyData,
6.       // 本次请求需要用户登录才可以发出
7.       { cancelToken: axiosInstance.cancelSource.token }
8.     );
9.     return completed;
10.   } catch (error) {
11.     // 判断档次错误是否为因没有登陆（cancelToken）导致的错误
12.     if (axiosInstance.isCancel(error)) {
13.       ElMessage.warning(error.message);
14.     } else {
15.       throw error;
16.     }
17.   }
18. }

复制代码

小结

通过 axios 提供的 CancelToken 可以标识本次请求是否需要经过拦截器中的判断同意通过才可发起。

• 在拦截器中，用户没有登录时，通过 CalcenToken 提供的 cancel 取消本次请求。
  
• 在拦截器中，用户没有登陆时，通过 CalcenToken 提供的 cancel 函数传递本次错误的消息。
  
• 给单次的请求中添加一项，{ cancelToken: axiosInstance.cancelSource.token } 配置项，表示本次请求需要验证 cancelToken。
  

来源:https://www.cnblogs.com/Himmelbleu/p/17402449.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！