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

这篇具有很好参考价值的文章主要介绍了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);
  }
);

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 可以标识本次请求是否需要经过拦截器中的判断同意通过才可发起。文章来源地址https://www.toymoban.com/news/detail-445785.html

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

到了这里,关于axios CancelToken 实现对特定请求的拦截,不要所有请求都进行相同的拦截的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • antdesign+vue+ts自定义上传文件customRequest,显示进度条onProgress,axios请求中断axios.CancelToken。

    customRequest里面有一个data参数,data包含了对file文件上传状态的操作:例如:onSuccess、onProgress、onError等 和file文件。 改变文件上传状态:可以通过改变fileList里面file的status和respones。 踩坑: 1、在customRequest文件上传完成以后,会自动重新更新一下fileList文件。上传之前挂载在

    2023年04月25日
    浏览(37)
  • Vue3的axios请求封装,请求拦截,相应拦截

    对于三者放在Service.js中封装,方便使用 axios.create  的作用是创建一个新的  axios  实例,该实例可以具有自定义配置。通过使用  axios.create ,您可以为任何 API 生成一个客户端,并在使用同一客户端的任何调用中重复使用相同的配置。这使得在应用程序中使用多个 API 时更加

    2024年02月03日
    浏览(43)
  • 关于axios的两种拦截方式:请求拦截和响应拦截

    提示:这里可以添加本文要记录的大概内容: 提示:以下是本篇文章正文内容,下面案例可供参考 axios.interceptors.request.use() 请求拦截 axios.interceptors.request.use( function ( config ) { return config }) 这个方法的参数是一个函数,发送请求之前就会执行这个函数,函数里面的参数就是执

    2024年01月24日
    浏览(38)
  • 【axios网络请求库】认识Axios库;axios发送请求、创建实例、创建拦截器、封装请求

    功能特点: 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 支持多种请求方式: axios(config) axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, c

    2024年02月10日
    浏览(41)
  • axios 请求和响应拦截器

    1. 创建实例 使用 axios.create() 使用自定义配置创建一个 axios 实例。 2. 拦截器 在请求或响应被 then 或者 catch 处理前拦截他们,拦截分为请求拦截和响应拦截。 2.1 request 拦截器,全局添加市场信息 removeMarketCode 是否移除市场信息,默认不移除; 根据上述代码可以看到,市场信

    2024年02月09日
    浏览(38)
  • 【前端知识】Axios——请求拦截器模板

    Axios是一个基于Promise的HTTP客户端,用于发送HTTP请求。它可以在浏览器和Node.js环境中使用,并且提供了许多强大的功能,例如拦截请求和响应、转换请求和响应数据、取消请求等。 Axios具有简单易用的API,可以轻松地发送GET、POST、PUT、DELETE等各种类型的请求。它还支持异步操

    2024年02月09日
    浏览(47)
  • axios 中使用请求响应拦截器

    axios 简介: Axios 是一个 基于 promise 网络请求库 ,作用于 node.js 和浏览器 中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在 服务端它使用原生 node.js http 模块 , 而在 客户端 (浏览端) 则使用 XMLHttpRequests 。 axios的特性: 从浏览器创建 XMLHttpRequests 从 node.js 创

    2024年02月16日
    浏览(50)
  • Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求

    Axios 是一个流行的基于 Promise 的 HTTP 客户端库,用于在浏览器和 Node.js 中发出 HTTP 请求。 Axios 还支持请求和响应的拦截器。接下来通过这篇文章,我们一起来学习和了解一下 Axios 拦截器和并发请求,通过实际代码来介绍如何使用 Axios 拦截器。 拦截器会在发生响应请求之前和

    2024年02月10日
    浏览(42)
  • axios拦截器,如何批量处理请求响应

    从浏览器创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防御XSRF 在请求或响应被 then 或 catch 处理前拦截它们。 新建request.js,写入以下内容: 在需要使用的页面进行调用 上一步咱们将axios拦

    2024年02月13日
    浏览(40)
  • axios拦截器:每次请求自动带上 token

    Step 1:创建Axios实例并添加拦截器 在你的Vue项目中,一般我们会先导入axios,然后创建一个axios实例。这样做是为了方便统一管理和配置。 上面的代码做了什么呢? 1. 我们创建了一个axios实例service,相当于有了一个专属邮差。 2. 给这个邮差设置了规则:每次出门送信前,先检

    2024年04月09日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包