- A+
所属分类:Web前端
前言
一旦给 axios 添加了拦截器,就会对所有的 post、get 等请求进行拦截。但不是所有的请求都需要进行拦截,如公共的请求,即不需要用户登录即可发起请求的 api 我们应当放行。
- 通过
axios.interceptors.request.eject(requestId)
清除 request 或者 response 的拦截器。想要再次恢复就需要重新创建拦截器。 - 第二种通过
axios.CancelToken.source()
更加灵活地处理需拦截的逻辑,如只需要拦截没有登录的请求,不需要所有请求都需要登录,并可处理本次的错误消息。
axios CancelToken
- 创建
axios.CancelToken.source()
CancelToken 的实例。 - 在拦截器中或者其他任何地方通过 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 };
针对特定请求的拦截
- 在本次请求中,需要验证用户是否登录,因此在请求配置项中添加
{ cancelToken: axiosInstance.cancelSource.token }
。 - 程序发起请求之后,经过请求的拦截器。
- 若没有登陆,取消本次请求,并进入 catch 块,处理错误。
- 若登录,不取消本次请求,请求可以完整执行。
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
可以标识本次请求是否需要经过拦截器中的判断同意通过才可发起。
- 在拦截器中,用户没有登录时,通过
CalcenToken
提供的cancel
取消本次请求。 - 在拦截器中,用户没有登陆时,通过
CalcenToken
提供的cancel
函数传递本次错误的消息。 - 给单次的请求中添加一项,
{ cancelToken: axiosInstance.cancelSource.token }
配置项,表示本次请求需要验证 cancelToken。