提升 Web 请求效率：Axios request 封装技巧

在开发中，为了提高效率，通常对 Axios 进行封装，简化了请求的发送和对响应的处理。同时，统一错误处理机制有助于维护代码的清晰和一致性。本文介绍了一些高效封装 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);});

通过这些方法，你可以轻松实现请求的发起和结果的处理。