vue3如何封装axios

Vue3如何封装Axios

在现代前端开发中，Axios 是一个非常流行的 HTTP 客户端库，用于发送异步请求。在 Vue3 项目中，我们通常会将 Axios 进行封装，以便更好地管理请求、统一处理错误、添加拦截器等。本文将介绍如何在 Vue3 中封装 Axios，并提供一个完整的示例。

1. 安装Axios

首先，我们需要在项目中安装 Axios。可以通过 npm 或 yarn 进行安装：

npm install axios # 或者 yarn add axios 

2. 创建Axios实例

为了更好地管理请求，我们可以创建一个 Axios 实例，并对其进行配置。通常我们会将 Axios 实例放在一个单独的文件中，例如 src/utils/request.js。

import axios from 'axios'; // 创建axios实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 设置基础URL timeout: 5000, // 请求超时时间 }); export default service; 

3. 添加请求拦截器

在发送请求之前，我们可能需要对请求进行一些处理，例如添加 token、设置请求头等。我们可以通过 Axios 的请求拦截器来实现。

// 请求拦截器 service.interceptors.request.use( (config) => { // 在发送请求之前做些什么 const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, (error) => { // 对请求错误做些什么 return Promise.reject(error); } ); 

4. 添加响应拦截器

在接收到响应后，我们可能需要对响应数据进行处理，例如统一处理错误、解析数据等。我们可以通过 Axios 的响应拦截器来实现。

// 响应拦截器 service.interceptors.response.use( (response) => { // 对响应数据做些什么 const res = response.data; if (res.code !== 200) { // 处理业务错误 return Promise.reject(new Error(res.message || 'Error')); } else { return res; } }, (error) => { // 对响应错误做些什么 return Promise.reject(error); } ); 

5. 封装请求方法

为了更方便地使用 Axios，我们可以封装一些常用的请求方法，例如 get、post、put、delete 等。

// 封装get请求 export function get(url, params) { return service({ url, method: 'get', params, }); } // 封装post请求 export function post(url, data) { return service({ url, method: 'post', data, }); } // 封装put请求 export function put(url, data) { return service({ url, method: 'put', data, }); } // 封装delete请求 export function del(url, params) { return service({ url, method: 'delete', params, }); } 

6. 在Vue3中使用封装的Axios

在 Vue3 中，我们可以通过 provide 和 inject 来全局注入 Axios 实例，或者在组件中直接使用封装的请求方法。

import { provide } from 'vue'; import service from '@/utils/request'; export default { setup() { provide('axios', service); }, }; 

在组件中使用：

import { inject } from 'vue'; export default { setup() { const axios = inject('axios'); const fetchData = async () => { try { const response = await axios.get('/api/data'); console.log(response.data); } catch (error) { console.error(error); } }; return { fetchData, }; }, }; 

7. 总结

通过以上步骤，我们成功地在 Vue3 项目中封装了 Axios，并实现了请求拦截器、响应拦截器以及常用的请求方法。这样不仅提高了代码的可维护性，还能更好地处理请求和响应中的各种情况。

在实际项目中，你可以根据需求进一步扩展和优化这个封装，例如添加更多的请求方法、处理不同的错误码、添加请求缓存等。希望本文对你有所帮助！