掌握axios与Vue 3：构建高效HTTP请求的终极指南

弁言

axios作为一个广泛使用的JavaScript库，因其轻便的API、强大的功能和良好的欣赏器兼容性，成为了许多前端开发者在Vue 3项目中的首选。
 axios简介

axios是什么？

axios是一个基于Promise的HTTP客户端，用于欣赏器和node.js情况中。它允许开发者以一种轻便的方式发送异步HTTP请求到REST endpoints，并处理相应。axios支持请求和相应拦截器、主动转换JSON数据、客户端支持防御XSRF等特性。
axios的主要特点和优势

• 基于Promise：axios使用Promise，这是现代JavaScript中处理异步操纵的尺度方式。
  
• 欣赏器和Node.js兼容：axios可以在前端和后端情况中使用，方便前后端代码共享。
  
• 请求和相应拦截器：可以添加拦截器来处理请求或相应，比方添加认证令牌、日记记录等。
  
• 主动转换JSON数据：axios会主动将JSON字符串转换为JavaScript对象，反之亦然。
  
• 支持请求取消：可以取消正在举行的请求。
  
• 支持请求和相应的设置：可以对请求和相应举行具体的设置，如超时设置、自定义HTTP头等。
  

axios的基本使用方法（GET、POST请求示例）

GET请求示例：

1. // 使用axios发送GET请求
2. axios.get('https://api.example.com/data')
3.   .then(function (response) {
4.     // 处理成功情况
5.     console.log(response.data);
6.   })
7.   .catch(function (error) {
8.     // 处理错误情况
9.     console.error(error);
10.   });

复制代码

POST请求示例：

1. // 使用axios发送POST请求
2. axios.post('https://api.example.com/data', {
3.     firstName: 'Fred',
4.     lastName: 'Flintstone'
5.   })
6.   .then(function (response) {
7.     // 处理成功情况
8.     console.log(response.data);
9.   })
10.   .catch(function (error) {
11.     // 处理错误情况
12.     console.error(error);
13.   });

复制代码

在这些示例中，我们使用了axios的.get()和.post()方法来发送GET和POST请求。每个方法都返回一个Promise对象，该对象在请求乐成时解决，并在请求失败时拒绝。通过.then()和.catch()方法，我们可以处理乐成的相应和错误情况。
这些基本的使用方法是axios的焦点，通过它们，开发者可以轻松地在Vue 3应用中实现与后端服务的交互。
安装和设置axios

1.使用npm安装axios：

1. npm install axios

复制代码

2.大概使用yarn安装axios：

1. yarn add axios

复制代码

3.同样可以通过pnpm来安装axios。但是我们首先确保项目中已经安装了pnpm。如果还没有安装，可以通过npm或yarn来安装pnpm：

1. npm install -g pnpm

复制代码

大概

1. yarn global add pnpm

复制代码

安装完成后，你可以使用pnpm来安装axios：

1. pnpm add axios

复制代码

实战阶段

我们可以将封装好的HTTP请求模块定名为request.js，并使用request作为导入的别名。以下是创建一个名为request.js的封装好的HTTP请求模块的示例：

1. // request.js
2. import axios from 'axios';
4. // 创建axios实例
5. const service = axios.create({
6.   baseURL: process.env.VUE_APP_BASE_API, // API的基础URL
7.   timeout: 5000 // 请求超时时间
8. });
10. // 请求拦截器
11. service.interceptors.request.use(
12.   config => {
13.     // 在这里可以添加一些请求前的操作，例如添加token
14.     return config;
15.   },
16.   error => {
17.     // 请求错误处理
18.     console.error('Request Error:', error);
19.     return Promise.reject(error);
20.   }
21. );
23. // 响应拦截器
24. service.interceptors.response.use(
25.   response => {
26.     // 对响应数据做点什么
27.     return response.data;
28.   },
29.   error => {
30.     // 响应错误处理
31.     console.error('Response Error:', error);
32.     return Promise.reject(error);
33.   }
34. );
36. export default service;

复制代码

然后，在你的Vue 3组件中，你可以通过导入上面创建的request.js模块来发送HTTP请求：

1. // MyComponent.vue
2. <script setup>
3. import { ref } from 'vue';
4. import request from './request'; // 假设request.js位于同一目录下
6. const fetchData = async () => {
7.   try {
8.     const response = await request.get('/some-endpoint');
9.     // 处理响应数据
10.     console.log(response);
11.   } catch (error) {
12.     // 处理错误
13.     console.error('Error fetching data:', error);
14.   }
15. };
17. // 调用fetchData以获取数据
18. fetchData();
19. </script>

复制代码

在这个示例中，我们使用request作为导入的别名，这样在调用请求方法时，代码更加轻便明白。通过这种方式，你可以轻松地在多个组件中重用HTTP请求逻辑，同时保持代码的清楚和组织性。此外，你还可以根据必要进一步封装更多的请求方法（如POST、PUT、DELETE等），以及添加更多的设置和错误处理逻辑。
请求和相应拦截器的高级设置（以pinia为例子）

在Pinia中获取token

首先，确保您已经在Pinia中定义了相应的store，并且该store中包含了token。比方：

1. // stores/auth.js
2. import { defineStore } from 'pinia';
4. export const useAuthStore = defineStore('auth', {
5.   state: () => ({
6.     token: null,
7.   }),
8.   actions: {
9.     setToken(newToken) {
10.       this.token = newToken;
11.       localStorage.setItem('token', newToken);
12.     },
13.     removeToken() {
14.       this.token = null;
15.       localStorage.removeItem('token');
16.     },
17.   },
18. });

复制代码

然后，在请求拦截器中，您可以从Pinia的store中获取token并添加到请求头中：

1. // request.js
2. import axios from 'axios';
3. import { useAuthStore } from '../stores/auth'; // 假设您的Pinia store文件位于此路径
5. const service = axios.create({
6.   baseURL: process.env.VUE_APP_BASE_API,
7.   timeout: 5000,
8. });
10. service.interceptors.request.use(
11.   config => {
12.     const authStore = useAuthStore();
13.     const token = authStore.token;
14.     if (token) {
15.       config.headers['Authorization'] = `Bearer ${token}`;
16.     }
17.     return config;
18.   },
19.   error => {
20.     console.error('Request Error:', error);
21.     return Promise.reject(error);
22.   }
23. );
25. export default service;

复制代码

在相应拦截器中举行数据转换、错误重试等操纵

相应拦截器可以用来处理服务器返回的数据，比方转换数据格式或处理特定的错误。以下是如何在相应拦截器中举行数据转换和错误重试的示例：

1. // request.js
2. // ...之前的代码
4. service.interceptors.response.use(
5.   response => {
6.     // 假设服务器返回的数据格式为JSON，且包含data字段
7.     const data = response.data;
8.     // 可以根据需要对数据进行转换或处理
9.     return data;
10.   },
11.   error => {
12.     // 响应错误处理
13.     // 例如，如果响应状态码为401（未授权），则可能需要重新登录
14.     if (error.response && error.response.status === 401) {
15.       // 重定向到登录页面
16.       router.push('/login');
17.     }
18.     // 如果响应状态码为429（请求过多），则可以进行错误重试
19.     if (error.response && error.response.status === 429) {
20.       // 重试逻辑
21.       console.log('Request was rate limited, retrying...');
22.       // 可以在这里实现重试逻辑，例如使用递归调用或使用第三方库
23.     }
24.     return Promise.reject(error);
25.     //这行代码的意思是返回一个被拒绝的Promise对象，并将error作为拒绝的原因
26.   }
27. );
29. export default service;

复制代码

资料推荐

1.axios官方文档：Axios中文文档 | Axios中文网
2.Vue.js官方文档：https://cn.vuejs.org/
3.Pinia官方文档：Pinia | The intuitive store for Vue.js
总结

axios是一个功能强大的HTTP客户端库，它使用Promise来处理异步请求，非常适合在Vue 3项目中使用

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。