二次封装Axios，秒变API访问狂人
2023-09-20 21:07:13
二次封装 Axios：模块化管理接口，让 HTTP 请求畅通无阻
前言
对于前端开发人员来说，Axios 是一个必不可少的工具，可以轻松发送 HTTP 请求。然而，随着项目规模的扩大和接口数量的增加，管理这些接口并保持代码可读性和可维护性就变得至关重要。二次封装 Axios 是解决这一痛点的利器，它可以让你实现模块化接口管理，简化 API 访问过程。
搭建二次封装 Axios 的舞台
安装 Axios
首先，在你的项目中安装 Axios：
npm install axios
创建 Request 文件夹
在项目中创建一个名为 "request" 的文件夹，用于存放二次封装 Axios 的代码。
创建 Http.js 文件
在 "request" 文件夹中创建一个名为 "http.js" 的文件，用于编写二次封装 Axios 的逻辑。
二次封装 Axios，让代码更出众
引入 Axios
在 "http.js" 文件中，引入 Axios：
import axios from "axios";
创建自定义 Axios 实例
为了实现二次封装，我们需要创建一个自定义的 Axios 实例。这个实例可以让我们自定义请求配置、拦截器等：
const http = axios.create({
// 配置项
});
配置请求
在自定义的 Axios 实例中，我们可以配置请求的默认值，如超时时间和请求头：
http.defaults.timeout = 10000;
http.defaults.headers.common['Content-Type'] = 'application/json';
添加拦截器
拦截器是 Axios 提供的强大功能，它允许我们在请求发送之前和之后做一些事情。我们可以使用拦截器来添加请求头、处理错误等：
http.interceptors.request.use((config) => {
// 在发送请求之前做一些事情
return config;
});
http.interceptors.response.use((response) => {
// 在收到响应之后做一些事情
return response;
}, (error) => {
// 处理错误
return Promise.reject(error);
});
导出自定义 Axios 实例
最后，我们将自定义的 Axios 实例导出，以便在其他地方使用：
export default http;
创建 Api.js 文件，管理所有接口请求
新建 Api.js 文件
在 "request" 文件夹中创建一个名为 "api.js" 的文件，用于管理所有接口请求。
引入 Http.js
在 "api.js" 文件中，引入 "http.js" 文件：
import http from "./http";
定义接口请求函数
在 "api.js" 文件中，定义一个接口请求函数，接受接口地址和请求参数作为参数，并返回一个 Promise 对象：
export const fetchApi = (url, params = {}) => {
return http({
url,
method: 'get',
params,
});
};
导出接口请求函数
最后，将接口请求函数导出，以便在其他地方使用：
export default fetchApi;
在需要使用接口的页面中使用 Api.js
引入 Api.js
在需要使用接口的页面中，引入 "api.js" 文件：
import { fetchApi } from "./request/api";
调用接口请求函数
在页面中，调用 "api.js" 文件中的接口请求函数，并处理返回的 Promise 对象：
fetchApi('/api/users').then((res) => {
// 处理响应
}).catch((error) => {
// 处理错误
});
二次封装 Axios，让 API 访问如鱼得水
二次封装 Axios 的好处多多，它可以让你：
- 模块化管理接口： 将所有接口请求集中在一个文件中，方便管理和维护。
- 自定义请求配置和拦截器： 根据自己的需求自定义请求配置和拦截器，提高代码的可读性和可维护性。
- 简化 API 访问代码： 通过二次封装 Axios，可以简化 API 访问代码，让代码更简洁、更易读。
结论
二次封装 Axios 是一种强大的技术，可以简化 API 访问过程，提高代码的可读性和可维护性。通过利用本文中的技巧，你可以轻松地实现模块化接口管理，让你的 HTTP 请求畅通无阻。
常见问题解答
1. 二次封装 Axios 的主要优势是什么？
二次封装 Axios 的主要优势包括模块化接口管理、自定义请求配置和拦截器，以及简化 API 访问代码。
2. 如何创建自定义的 Axios 实例？
你可以使用 axios.create() 方法创建自定义的 Axios 实例，并根据需要自定义请求配置和拦截器。
3. 如何将接口请求集中在一个文件中？
你可以创建一个 "api.js" 文件，并在其中定义一个接口请求函数，该函数接受接口地址和请求参数作为参数，并返回一个 Promise 对象。
4. 如何在页面中使用二次封装的 Axios？
在需要使用接口的页面中，引入 "api.js" 文件并调用接口请求函数。
5. 如何处理 API 响应？
你可以使用 .then() 和 .catch() 方法来处理 API 响应。.then() 方法处理成功响应，而 .catch() 方法处理错误响应。
