什么是Axios? 为什么要封装? 如何优雅地封装?
在刚开始学习前端时，我对这些问题充满了疑惑。如今，我已经能够熟练地封装属于我自己的Axios方法。其实，这并不难。接下来，我会为大家整理一下封装Axios的步骤，希望对你们有所帮助。
什么是Axios?
简单来说，Axios 是一个功能强大的库，用于在浏览器和 Node.js 环境中发送请求，处理前后端数据交互。在大部分项目中，我们都会使用 Axios 来进行数据请求。
为什么要封装Axios?
封装Axios有以下几个重要原因：
简化重复性的代码：在项目中，通常会有统一的
baseURL、headers等配置。Axios 提供了拦截器功能，我们可以在拦截器中对这些重复性的代码进行集中管理，从而提高代码的可读性和可维护性。处理响应逻辑：我们可以在请求拦截器或响应拦截器中进行逻辑处理。例如，根据后端返回的状态码，显示不同的提示信息。这样做可以让我们的代码更加简洁和优雅。
当然，还有其他很多封装Axios的原因，这里先提到这两个我觉得比较重要的点。
如何优雅地封装Axios?
首先，我们需要在项目中安装Axios：
npm install axios
通常情况下，我们会在项目的 utils 文件夹中创建一个 request.js 文件，来对 Axios 进行封装。首先，我们需要创建一个 Axios 实例，并配置 baseURL 等信息。在正式开发中，我们通常会根据当前环境（测试环境或生产环境）来设置 baseURL。
// utils/request.js
import axios from 'axios';
const http = axios.create({
baseURL: 'http://api.com', // 请求后端接口的baseURL
timeout: 100000, // 设置请求的超时时间
});
export default http;
创建了 http 的 Axios 实例后，我们可以封装 get 和 post 等请求方法：
// utils/request.js
import axios from 'axios';
const http = axios.create({
baseURL: 'http://api.com', // 请求后端接口的baseURL
timeout: 100000, // 设置请求的超时时间
});
export function get(url, params) {
return http.get(url, { params });
}
export function post(url, data) {
return http.post(url, { data });
}
export default http;
接着，我们可以使用拦截器来处理请求和响应。比如，在请求之前添加 token 或者请求头等信息：
// utils/request.js
import axios from 'axios';
const http = axios.create({
baseURL: 'http://api.com', // 请求后端接口的baseURL
timeout: 100000, // 设置请求的超时时间
});
// 请求拦截器
http.interceptors.request.use(
config => {
// 例如，添加 Authorization 头
config.headers.Authorization = `Bearer ${引入token}`;
return config;
},
err => {
return Promise.reject(err);
}
);
// 响应拦截器
http.interceptors.response.use(
response => {
return response;
},
err => {
return Promise.reject(err);
}
);
export function get(url, params) {
return http.get(url, { params });
}
export function post(url, data) {
return http.post(url, { data });
}
export default http;
封装完 Axios 后，我们可以在项目中的 api 文件夹下创建接口文件，并导入我们封装好的 http 方法。以登录接口为例：
// api/login.js
import http from '@/utils/request';
// 登录方法
export function login(url, data) {
return http.post(url, { data });
}
在组件中使用时，像这样调用即可：
// home.vue
import { login } from '@api/login';
login('/login', {
username: 'cc',
password: '*****'
});