最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

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

来源：博客园


(资料图片仅供参考)

前言

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

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

axios CancelToken

  1. 创建 axios.CancelToken.source()CancelToken 的实例。
  2. 在拦截器中或者其他任何地方通过 CancelToken 提供的 cancel 函数取消本次请求，并提供错误消息。
import axios from "axios";const axiosInstance = axios.create({  baseURL: "http://localhost:9000/api/v1"});// 将 cancelSource 挂载到 axiosInstance 实例上axiosInstance.cancelSource = axios.CancelToken.source();// isCancel 是判断当前错误是否为主动取消拦截器的错误，同样挂载到 axios 实例上axiosInstance.isCancel = axios.isCancel;axiosInstance.interceptors.request.use(  config => {    if (!localStorage.getItem("userId")) {      // 用户没有登陆，停止添加了 cancelToken 的请求，并给出本次请求失败的错误消息      axiosInstance.cancelSource.cancel("您没有登陆，本次操作取消！");    }        // 其他拦截的业务逻辑，如拦截一次性请求发了很多次等。可见 CancelToken 很灵活    return config;  },  error => {    return Promise.reject(error);  });axiosInstance.interceptors.request.use(  config => {    return config;  },  error => {    return Promise.reject(error);  });export { axiosInstance };

针对特定请求的拦截

  1. 在本次请求中，需要验证用户是否登录，因此在请求配置项中添加 { cancelToken: axiosInstance.cancelSource.token }。
  2. 程序发起请求之后，经过请求的拦截器。
  3. 若没有登陆，取消本次请求，并进入 catch 块，处理错误。
  4. 若登录，不取消本次请求，请求可以完整执行。
export async function setCollection(bodyData) {  try {    const { data: completed } = await axiosInstance.post(      "/set/collection",      bodyData,      // 本次请求需要用户登录才可以发出      { cancelToken: axiosInstance.cancelSource.token }    );    return completed;  } catch (error) {    // 判断档次错误是否为因没有登陆（cancelToken）导致的错误    if (axiosInstance.isCancel(error)) {      ElMessage.warning(error.message);    } else {      throw error;    }  }}

小结

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

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

关键词：