掌握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请求示例：

// 使用axios发送GET请求
axios.get('https://api.example.com/data').then(function (response) {// 处理成功情况console.log(response.data);}).catch(function (error) {// 处理错误情况console.error(error);});

POST请求示例：

// 使用axios发送POST请求
axios.post('https://api.example.com/data', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {// 处理成功情况console.log(response.data);}).catch(function (error) {// 处理错误情况console.error(error);});

在这些示例中，我们使用了axios的.get()和.post()方法来发送GET和POST请求。每个方法都返回一个Promise对象，该对象在请求成功时解决，并在请求失败时拒绝。通过.then()和.catch()方法，我们可以处理成功的响应和错误情况。

这些基本的使用方法是axios的核心，通过它们，开发者可以轻松地在Vue 3应用中实现与后端服务的交互。

安装和配置axios

1.使用npm安装axios：

npm install axios

2.或者使用yarn安装axios：

yarn add axios

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

npm install -g pnpm

或者

yarn global add pnpm

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

pnpm add axios

实战阶段

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

// request.js
import axios from 'axios';// 创建axios实例
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // API的基础URLtimeout: 5000 // 请求超时时间
});// 请求拦截器
service.interceptors.request.use(config => {// 在这里可以添加一些请求前的操作，例如添加tokenreturn config;},error => {// 请求错误处理console.error('Request Error:', error);return Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use(response => {// 对响应数据做点什么return response.data;},error => {// 响应错误处理console.error('Response Error:', error);return Promise.reject(error);}
);export default service;

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

// MyComponent.vue
<script setup>
import { ref } from 'vue';
import request from './request'; // 假设request.js位于同一目录下const fetchData = async () => {try {const response = await request.get('/some-endpoint');// 处理响应数据console.log(response);} catch (error) {// 处理错误console.error('Error fetching data:', error);}
};// 调用fetchData以获取数据
fetchData();
</script>

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

请求和响应拦截器的高级配置（以pinia为例子）

在Pinia中获取token

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

// stores/auth.js
import { defineStore } from 'pinia';export const useAuthStore = defineStore('auth', {state: () => ({token: null,}),actions: {setToken(newToken) {this.token = newToken;localStorage.setItem('token', newToken);},removeToken() {this.token = null;localStorage.removeItem('token');},},
});

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

// request.js
import axios from 'axios';
import { useAuthStore } from '../stores/auth'; // 假设您的Pinia store文件位于此路径const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 5000,
});service.interceptors.request.use(config => {const authStore = useAuthStore();const token = authStore.token;if (token) {config.headers['Authorization'] = `Bearer ${token}`;}return config;},error => {console.error('Request Error:', error);return Promise.reject(error);}
);export default service;

在响应拦截器中进行数据转换、错误重试等操作

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

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