在开发中，为了提高效率，通常对 Axios 进行封装，简化了请求的发送和对响应的处理。同时，统一错误处理机制有助于维护代码的清晰和一致性。本文介绍了一些高效封装 Axios 请求的方法。
封装理念
通过创建一个请求函数，我们可以隐藏 Axios 的直接调用，将请求的配置作为参数传入。成功的请求会解析（resolve）返回数据，失败的请求则拒绝（reject）并返回错误信息。promise 的使用使得处理这些行为变得异常便利。
封装基础请求如下所示:
function request(options) {
? return new Promise((resolve, reject) => {
?? axios(options)
? ?? .then(response => {
? ? ?? resolve(response.data);
? ?? })
? ?? .catch(error => {
? ? ?? reject(error);
? ?? });
? });
}
进一步，封装常用的 get 和 post 请求方法:
function get(endpoint, query) {
? return request({
?? method: 'get',
?? url: endpoint,
?? params: query
? });
}
function post(endpoint, payload) {
? return request({
?? method: 'post',
?? url: endpoint,
?? data: payload
? });
}
现在，在代码中直接利用 get 或 post 函数即可发起请求。
精简重复代码
通用设置，如 baseURL，应当被提取，避免每次请求重复声明。
function request(options) {
? let axiosInstance = axios.create({
?? baseURL: 'https://your-api-domain.com/api/',
?? timeout: 10000
? });
? // 应用实例配置
? options = Object.assign({}, options, { axiosInstance });
? return new Promise((resolve, reject) => {
?? axiosInstance(options)
? ?? .then(response => {
? ? ?? resolve(response.data);
? ?? })
? ?? .catch(error => {
? ? ?? reject(error);
? ?? });
? });
}
如此一来，简化了通用配置的过程。
拦截器的应用
拦截器是 Axios 的重要特性，使得对请求和响应的修改变得简洁。
// 添加请求拦截器
axiosInstance.interceptors.request.use(
? config => {
?? // 修改请求之前的配置
?? return config;
? },
? error => {
?? // 请求错误的处理逻辑
?? return Promise.reject(error);
? }
);
// 添加响应拦截器
axiosInstance.interceptors.response.use(
? response => {
?? // 统一处理响应数据
?? return response;
? },
? error => {
?? // 统一处理响应错误
?? return Promise.reject(error);
? }
);
错误的统一管理
利用 .catch 捕捉整个请求流程中可能出现的异常，简化了错误处理逻辑。
function request(options) {
? // ...
}
request(options)
? .then(data => {
?? // 处理请求成功的数据
? })
? .catch(error => {
?? // 统一处理请求异常
? });
请求的取消
在需要中断请求时, Axios 的取消令牌（cancel token）提供了便利。
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
request({
? // 其他配置...
? cancelToken: source.token
});
// 如需取消请求
source.cancel('Operation canceled by the user.');
使用示例
以下是一个调用实例，演示了封装函数的使用方法:
import { get, post } from './request';
get('/user', { id: '12345' })
? .then(response => {
?? console.log(response);
? })
? .catch(error => {
?? console.error(error);
? });
post('/user', { name: 'Jane' })
? .then(response => {
?? console.log(response);
? })
? .catch(error => {
?? console.error(error);
? });
通过这些方法，你可以轻松实现请求的发起和结果的处理。
实用提示
把 Axios 封装进一个可配置的 request 方法
将基础配置如 baseURL 提取出来
利用拦截器优化请求与响应的处理
通过 .catch 异常处理简化错误处理
支持请求的取消
结束语
对 Axios 进行恰当的封装能够大幅提升开发效率，减少重复代码，并且集中处理错误，以上提到的封装策略都是常见的实践，依据具体情况灵活调整。
知识扩展：
Axios 如何取消请求？2 种方法助你掌握请求的控制权
Axios 的响应拦截器如何使用？响应拦截器的用法以及实践案例
参考：
Axios中文文档：https://www.kancloud.cn/yunye/axios/234845