Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求

这篇具有很好参考价值的文章主要介绍了Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求

📋前言

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


🎯关于拦截器

拦截器会在发生响应请求之前和收到响应数据之后第一时间被调用。例如每个请求都需要带后端返回的 token,获取响应之前要有 loading 动画展示等,这些操作都能通过拦截器实现,接下来我们来详细看看拦截器的两种类型。
Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求
Axios 拦截器分为两种类型:请求拦截器和响应拦截器。

1️⃣请求拦截器(Request Interceptors): 请求拦截器会在每个请求被发送之前执行,可以用来对请求配置进行修改,或者添加一些额外的逻辑。一般用来处理以下情况:

  • 添加请求头信息(如身份验证信息、token 等)
  • 在请求发送前展示加载动画或提示用户
  • 对请求参数进行转换或格式化
  • 在请求失败时进行重试等

请求拦截器使用 axios.interceptors.request.use() 方法来注册。该方法接受两个函数作为参数,第一个函数用于成功拦截请求,第二个函数用于拦截请求发生错误的情况。


2️⃣响应拦截器(Response Interceptors): 响应拦截器会在每个响应被接收之后执行,可以用来对响应数据进行处理,或者添加一些额外的逻辑。常用的操作有:

  • 对响应数据进行格式化或转换
  • 根据响应状态码进行全局错误处理
  • 在接收到响应后隐藏加载动画或处理其他通用逻辑

响应拦截器使用 axios.interceptors.response.use() 方法来注册。该方法也接受两个函数作为参数,第一个函数用于成功拦截响应,第二个函数用于拦截响应发生错误的情况。
Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求


🎯项目创建

要创建一个 Vite 项目,需要先安装 Vite。可以使用 npm 或者 yarn 进行安装。在命令行中输入:

npm install vite -g  # 全局安装 vite
或者
yarn global add vite  # 全局安装 vite

然后通过以下命令创建一个 Vite 项目,名称是 axios-demo

npm init vite@latest axios-demo

选择 Vue
Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求
然后选择 TypeScript
Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求
默认生成的项目结构如下,然后在控制台输入 npm install 安装相关依赖 (主要选择当前文件夹)
Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求
最后输入 npm run dev 启动项目,出现如下页面表示运行成功。
Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求
Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求
到此项目创建完成,接下来我们来看看具体代码。


🎯代码分析

通过上述的内容,我们认识了两种类型的拦截器,以及创建好 vite 项目。在实现拦截器之前,首选需要创建一个 Axios 实例,可以使用 Axios.create() 方法创建实例。一般会在 src 目录下创建一个 utils 目录,然后在这个目录下创建 Axios.ts 文件用来存放 Axios 实例。代码如下。

import axios from 'axios';

// 创建axios实例
const axiosInatance = axios.create({
  baseURL: 'http://127.0.0.1:5173', // api的base URL
  timeout: 5000, // 设置请求超时时间
  responseType: 'json',
  withCredentials: true, // 是否允许带cookie这些
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
    'x-token': '777',
  },
});

export default axiosInatance;

Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求
上面代码中,axios.create() 方法接收了一个 AxiosRequestConfig 类型的对象,可以通过配置不同的属性值生成不同类型的 Axios 实例。这里就设置了 APIURL 、请求超时时间、响应类型等等参数。

我们在使用 Axios 实例的方法也很简单,在有发送请求的文件中直接引入 Axios 实例,然后直接调用内部方法发生 HTTP 请求即可。例如下面这段代码,我们通过 import axiosInstande from './utils/Axios'; 来引入 Axios 实例。

import axiosInstande from './utils/Axios';
// 通过Axios实例发送HTTP GET请求获取User信息
const getUser = async (ID: number) => {
  try {
    const response = await axiosInstande.get('/user', {
      params: { id: ID },
    });
    console.log(response);
  } catch (error) {
    console.error(error);
  }
};

Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求
拦截器的创建需要在 Axios 实例声明的文件,在上面说到的 Axios.ts 文件中创建,上面我们也介绍了拦截器的两种类型。这两个方法接收两个回调函数作为参数,第一个是成功回调函数参数,第二个是失败回调函数参数。例如下面这段代码,我们在 Axios.ts 文件中添加以下的内容。

import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';

// 创建axios实例
const axiosInatance = axios.create({
  baseURL: 'http://127.0.0.1:5173', // api的base URL
  timeout: 5000, // 设置请求超时时间
  responseType: 'json',
  withCredentials: true, // 是否允许带cookie这些
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
    'x-token': '777',
  },
});

// 请求拦截器
const requestInterceptor = axiosInatance.interceptors.request.use(
  // 在发送请求之前调用
  (config: AxiosRequestConfig): AxiosRequestConfig => {
    const newConfig = config;
    // 添加 token
    Object.assign(newConfig.headers, { 'x-token': 'some-token' });
    return newConfig;
  },
  (error: AxiosError): Promise<never> => {
    // 对请求错误时调用,可自己定义
    return Promise.reject(error);
  }
);

// 响应拦截器
const responseInterceptor = axiosInatance.interceptors.response.use(
  (response: AxiosResponse): AxiosResponse => {
    // 2xx 范围内的状态码都会触发该函数。对响数据成功时调用。
    return response;
  },
  (error: AxiosError): Promise<never> => {
    // 超出 2xx 范围的状态码都会触发该函数。对响应错误时调用。
    console.error('请求错误: ', error);
    return Promise.reject(error);
  }
);

// 移除请求拦截器
axiosInatance.interceptors.request.eject(requestInterceptor);

// 移除响应拦截器
axiosInatance.interceptors.response.eject(responseInterceptor);

export default axiosInatance;

这段代码会在每一个 Axios 发送的请求的 Header 中,通过请求拦截器添加 token 属性。如果成功接收到 2xx 的响应,则会调用响应式拦截器中成功回调函数,如果接收到错误响应,则会调用失败回调函数。

❗注意: 如果遇到如下两种错误,需要修改完错误才能实现最终效果,要不然无法通过拦截器添加 token,报错如下。
Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求
解决方法:更换 Axios 版本,在终端输入 npm install axios@1.1.3 --save 来更换,但解决完上面这个报错后,下面的报错并没有消除,依然不能通过拦截器添加 token
Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求
Object.assign(newConfig.headers, { 'x-token': 'some-token' }); 改成 Object.assign({},newConfig.headers, { 'x-token': 'some-token' }); 后报错解决了,但是没有成功添加 token(还是之前设置的 777 )。
Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求
所以我们换一种方法来添加 token,代码如下。
Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求

newConfig.headers = newConfig.headers || {};
newConfig.headers['x-token'] = 'some-token';

Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求
我们可以看到 x-token 的值被修改,是新添加的 some-token 。因为这个 URL 并不是可用的接口(本地没有后端服务),所以请求会报错 404 错误。但是在浏览器的控制台我们可以看到响应式拦截错误回调函数中打印的日志信息。
Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求
如果有移除拦截器的需要,可以直接调用 axiosInatance.interceptors.request.eject() 或者 axiosInatance.interceptors.response.eject() 方法来移除拦截器。实例代码如下(这里以移除的上面代码创建的拦截器为例子)。

// 移除请求拦截器
axiosInatance.interceptors.request.eject(requestInterceptor);

// 移除响应拦截器
axiosInatance.interceptors.response.eject(responseInterceptor);

🎯补充:并发请求

在更多的应用需求场景中,并不是只有一个接口,可能更多的是同时向后台发起多个不同的请求,同时进行多个接口请求就构成了并发。例如,一个网页中需要展示多个商品的详细信息,你可以使用并发请求来同时获取这些商品的数据,而不是一个一个地发送请求。

我们都知道 Axios 是一个基于 PromiseHTTP 请求库,所以我们可以用 Promise.all() 方法去实现并发请求,例如下面这段代码。

// 并发请求的 URL 列表
const urlList = [
  'https://jsonplaceholder.typicode.com/posts/1',
  'https://jsonplaceholder.typicode.com/posts/2'
];

// 发送并发请求
const requestAll = async () => {
  try {
    Promise.all(urlList.map(url => axios.get(url)))
      .then(axios.spread((response1, response2) => {
        // 请求1的结果
        console.log('Response 1:', response1.data);

        // 请求2的结果
        console.log('Response 2:', response2.data);
      }))
      .catch(error => {
        // 请求失败处理
        console.error(error);
      });
  } catch (error) {
    console.error(error);
  }
};

Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求
Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求


🧩axios.all() 和 Promise.all() 的区别

Axios.all()
axios.all()Axios 库提供的一个方法,用于同时发送多个请求,并在所有请求都完成后进行处理。它接受一个 Promise 对象的数组作为参数,并返回一个新的 Promise 对象。

axios.all([promise1, promise2, ...])
  .then(axios.spread((response1, response2, ...) => {
    // 处理所有请求的结果
  }))
  .catch(error => {
    // 处理请求失败的情况
  });

axios.all() 方法在所有并发请求都成功完成后才会将新的 Promise 对象解析。axios.spread() 方法可以将每个请求的结果作为参数传递给 then 方法中的回调函数。

补充: axios.spread()Axios 库提供的一个方法,用于解析并发请求的结果。它接受一个回调函数作为参数,该回调函数接受并发请求返回的结果作为参数。


Promise.all()
Promise.all()JavaScript 原生的 Promise API 提供的静态方法,也用于同时处理多个 Promise 对象。它接受一个 Promise 对象的数组作为参数,并返回一个新的 Promise 对象。

Promise.all([promise1, promise2, ...])
  .then(values => {
    // 处理所有 Promise 对象的结果
  })
  .catch(error => {
    // 处理 Promise 失败的情况
  });

Promise.all() 方法在所有 Promise 对象都成功完成后才会将新的 Promise 对象解析。then 方法接收到一个包含所有 Promise 结果的数组,可以对这些结果进行处理。如果有一个请求失败了,则没有任何返回结果。这就是 Promise.all() 方法的特点。
Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求
Axios 版本 0.21.0 及之后的版本中,全局的 Promise.all() 方法支持并发请求的处理,因此可以直接使用它来替代 axios.all()


📝最后

到此文章结束,这就是 Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求 的全部内容了,通过这篇文章我们可以了解学习到什么是 Axios 拦截器,通过实战学会如何使用拦截器,除此之外我们还认识学习了关于 Axios 并发请求的内容。
Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求
文章来源地址https://www.toymoban.com/news/detail-497765.html

到了这里,关于Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • VUE3 请求拦截器 响应拦截器

    1,导入axios  (使用axios进行接口的请求,页面发送http请求,很多情况我们要对请求和其响应进行特定的处理,如:判断token,设置请求头。如果请求数非常多,单独对每一个请求进行处理会变得非常麻烦,程序的优雅性也会大打折扣。所以axios为开发者提供了这样一个API:拦

    2024年02月16日
    浏览(49)
  • vue+axios——创建多个实例共用请求拦截器和响应拦截器(403错误信息不提示bug解决)——基础积累

    创建多个实例共用请求拦截器和响应拦截器:使用的是函数的继承,也就是 call() 方法,这个方法第一个参数就是 this ,后面的参数可以是一个也可以是多个。最后一定要记得要 return 出去,否则接口是拿不到数据的。 上面两个文件合并后的处理如下: 在 main.js 中添加如下内容

    2024年02月10日
    浏览(50)
  • vue全家桶进阶之路46:Vue3 Axios拦截器和globalProperties全局设置

    在Vue.js 3中,使用Axios与Vue.js 2.x中类似,但是需要进行一些修改和更新,下面是Vue.js 3中Axios的定义和使用方式: 首先,你需要安装Axios和Vue.js 3.x,可以使用npm或yarn等包管理工具安装: 然后,在你的Vue.js 3应用程序中,你可以使用以下代码来导入和使用Axios: 上面的代码使用

    2023年04月20日
    浏览(51)
  • vue全家桶进阶之路47:Vue3 Axios拦截器封装成request文件

    可以将Axios拦截器封装成一个单独的request文件,以便在整个应用程序中重复使用。 以下是一个示例,展示如何将Axios拦截器封装成一个request文件: 1、创建一个名为request.js的新文件,并导入Axios: 2、创建一个名为request的函数,并将其导出: 这将创建一个名为request的函数,

    2023年04月21日
    浏览(53)
  • Vue3 axios响应拦截器处理接口返回401未登录跳转登录页

    问题: 在 asiox 使用 useRouter 实例化创建 router 路由对象,在 response 响应拦截器里为 undefined 访问不到 使用 window.location.href = \\\'/login\\\' 跳转登录页, 本地可以正常跳转,测试环境页面会显示 not found 404, 测试环境访问地址大概是这样 ip:8080/pm/#/login , 本地没有 /pm 解决方案: 在 mai

    2024年01月21日
    浏览(47)
  • Vue3---请求拦截器携带token

    为什么要在请求拦截器携带Token? Token作为用户标识,在很多个接口中都需要携带Token才可以正确获取数据,所以需要在接口调用时携带Token。另外,为了统一控制采取请求拦截器携带的方案 如何配置? Axios请求 拦截器 可以在接口正式发起之前对请求参数做一些事情,通常Toke

    2024年02月15日
    浏览(46)
  • Vue3的axios请求封装,请求拦截,相应拦截

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

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

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

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

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

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

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

    2024年02月09日
    浏览(48)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包