[教程]Vue3高效封装Axios请求，解锁前后端协同新技能

在Vue3项目中，Axios是一个常用的HTTP客户端，它可以帮助开发者发送异步请求。通过封装Axios，我们可以更好地管理HTTP请求，例如添加统一的基础URL、请求头、拦截器等功能。以下是如何在V...

在Vue3项目中，Axios是一个常用的HTTP客户端，它可以帮助开发者发送异步请求。通过封装Axios，我们可以更好地管理HTTP请求，例如添加统一的基础URL、请求头、拦截器等功能。以下是如何在Vue3中高效封装Axios请求的详细指南。

1. 创建Axios实例

首先，我们需要创建一个Axios实例，并为其设置一些基础配置，如基础URL、超时时间等。

import axios from 'axios';
const service = axios.create({ baseURL: 'https://api.example.com', // 设置基础URL timeout: 5000, // 设置超时时间 headers: { 'Content-Type': 'application/json;charsetUTF-8' }
});

2. 添加请求拦截器

请求拦截器可以在发送请求之前对请求进行一些处理，例如添加token到请求头。

service.interceptors.request.use( config => { const token = localStorage.getItem('token'); // 从本地存储获取token if (token) { config.headers.Authorization = `Bearer ${token}`; // 添加token到请求头 } return config; }, error => { return Promise.reject(error); }
);

3. 添加响应拦截器

响应拦截器可以对响应数据进行一些处理，例如解析数据、处理错误等。

service.interceptors.response.use( response => { return response.data; // 返回实际的数据而不是整个响应对象 }, error => { if (error.response) { // 请求已发出，但服务器响应的状态码不在2xx的范围 console.error(error.response.status); } else if (error.request) { // 请求已发出，但没有收到响应 console.error(error.request); } else { // 发送请求时出了点问题 console.error('Error', error.message); } return Promise.reject(error); }
);

4. 使用封装后的Axios

现在，我们可以在Vue组件或其他地方使用这个封装好的Axios实例来发送请求。

export default { methods: { fetchData() { service.get('/api/user').then(res => { console.log(res.data); }).catch(err => { console.error(err); }); } }
};

5. 封装通用请求方法

为了提高代码的可读性和可维护性，我们可以封装一些通用的请求方法。

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

通过以上步骤，我们可以在Vue3项目中高效封装Axios请求。这样，我们就可以轻松地管理HTTP请求，并解锁前后端协同的新技能。