使用 Axios 进行 API 请求与接口封装
在现代前端开发中，数据请求是一个不可避免的部分。尤其是与后端进行数据交互时，我们需要一种简洁且高效的方式来发送 HTTP 请求，获取或提交数据。Axios 是一个基于 Promise 的 HTTP 客户端库，广泛应用于前端开发中。它支持 GET、POST、PUT、DELETE 等请求，并能在请求和响应时进行拦截与处理。本文将深入介绍如何使用 Axios，并封装常用的接口方法，使代码更加清晰、易于维护。
什么是 Axios？
Axios 是一个基于 Promise 的 HTTP 客户端库，适用于浏览器和 Node.js 环境。它能简化 HTTP 请求的发送，并提供许多方便的功能，如请求和响应的拦截、自动转换 JSON 数据、处理请求取消等。使用 Axios，我们可以以更简洁的方式与服务器进行数据交互，提升开发效率。
安装 Axios
在一个基于 npm 或 yarn 的项目中，使用 Axios 非常简单。通过以下命令安装即可：
npm install axios
# 或者
yarn add axios基本使用
在安装完 Axios 后，你就可以在项目中导入并使用它了。下面是一些常见的请求示例：
1. 发送 GET 请求
import axios from 'axios';
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
console.log('响应数据:', response.data);
})
.catch(error => {
console.error('请求失败:', error);
});2. 发送 POST 请求
import axios from 'axios';
const data = {
title: 'foo',
body: 'bar',
userId: 1
};
axios.post('https://jsonplaceholder.typicode.com/posts', data)
.then(response => {
console.log('响应数据:', response.data);
})
.catch(error => {
console.error('请求失败:', error);
});3. 设置请求头
import axios from 'axios';
axios.get('https://jsonplaceholder.typicode.com/posts', {
headers: {
'Authorization': 'Bearer token'
}
})
.then(response => {
console.log('响应数据:', response.data);
})
.catch(error => {
console.error('请求失败:', error);
});通过 headers 属性，我们可以在请求中添加自定义的请求头信息，常见的如 Authorization。
请求和响应拦截器
Axios 提供了请求拦截器和响应拦截器，可以在请求发送之前或者响应返回之后对数据进行处理。例如，可以在请求时加上统一的 token，或者在响应时进行错误处理。
设置请求拦截器
请求拦截器可以在请求发送前进行一些处理，例如加入认证 Token，修改请求头等。
axios.interceptors.request.use(config => {
// 在请求发送之前，加入 token 等公共信息
config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
return config;
}, error => {
return Promise.reject(error);
});在上述代码中，我们通过请求拦截器在每个请求中自动加入了 Authorization token。
设置响应拦截器
响应拦截器可以在收到服务器响应之后进行处理。在响应拦截器中，我们可以处理一些统一的逻辑，比如统一错误提示，或是处理数据格式等。
axios.interceptors.response.use(response => {
// 对响应数据进行处理
return response.data;
}, error => {
// 对错误响应进行处理
if (error.response) {
console.error('服务器返回错误:', error.response.status);
} else if (error.request) {
console.error('请求未收到响应:', error.request);
} else {
console.error('发生错误:', error.message);
}
return Promise.reject(error);
});通过响应拦截器，我们可以对响应数据进行格式化，或者在发生错误时进行统一的处理。
接口封装
直接在各个组件中使用 Axios 进行请求会导致代码重复，而且不方便维护。因此，通常我们会封装一个统一的接口方法，将所有的 API 请求集中管理。
1. 创建 API 封装模块
首先，我们创建一个 api.js 文件来集中管理所有接口的请求。通过封装，可以避免在各个组件中重复编写 Axios 请求。
import axios from 'axios';
// 创建 axios 实例
const apiClient = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com',
timeout: 10000,
});
// 请求拦截器
apiClient.interceptors.request.use(config => {
// 可以在这里设置通用请求头
config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
return config;
}, error => {
return Promise.reject(error);
});
// 响应拦截器
apiClient.interceptors.response.use(response => {
return response.data; // 只返回数据，简化操作
}, error => {
return Promise.reject(error);
});
export default apiClient;在上面的代码中，我们创建了一个 Axios 实例，并在请求和响应拦截器中进行了必要的配置。这样，所有接口请求都可以使用这个实例，统一管理。
2. 封装 API 请求
接下来，我们为每个接口封装具体的请求方法。例如，获取帖子列表、创建帖子等 API 请求：
获取帖子列表
import apiClient from './api';
export const getPosts = () => {
return apiClient.get('/posts');
};创建新帖子
import apiClient from './api';
export const createPost = (postData) => {
return apiClient.post('/posts', postData);
};更新帖子
import apiClient from './api';
export const updatePost = (id, postData) => {
return apiClient.put(`/posts/${id}`, postData);
};删除帖子
import apiClient from './api';
export const deletePost = (id) => {
return apiClient.delete(`/posts/${id}`);
};总结
封装 Axios 请求可以显著提高代码的可维护性和复用性。通过封装 API 请求，我们可以统一管理请求逻辑、错误处理和请求头设置等内容，让每个 Vue 组件只关注自己的业务逻辑，保持代码的简洁和清晰
本文要点总结：
- 使用
Axios发送 HTTP 请求。 - 设置请求拦截器和响应拦截器，统一处理请求与响应。
- 封装常用的 API 请求，避免代码重复。
通过这种方式，我们能够更好地管理前端与后端的通信，保证代码的高效与整洁。
希望这篇博客对你有所帮助！如果有任何问题或建议，欢迎留言讨论。