二次封装Axios，玩转前端请求开发

前端

2023-01-28 09:16:18

如何二次封装Axios：提升请求效率和定制化

一、Axios简介

Axios是一个基于Promise的HTTP客户端库，以其友好易用的API和简化的异步请求处理能力而闻名。它提供了一系列功能，包括：

支持GET、POST、PUT、DELETE等多种请求方式
可设置超时时间以避免长时间等待
支持发送JSON数据并自动转换为JSON字符串
自动处理响应中的JSON数据并转换为JavaScript对象
可使用拦截器修改或处理请求和响应数据

二、二次封装Axios的必要性

虽然Axios功能强大，但为了满足特定的项目需求，我们经常需要对其进行二次封装。这样做可以带来以下好处：

统一请求接口，简化代码编写
对请求进行统一处理（如添加请求头、设置超时时间）
对响应数据进行统一处理（如转换为指定格式）
实现请求和响应拦截器，以便在请求或响应时进行特殊处理

三、二次封装Axios的步骤

二次封装Axios的过程相对简单：

创建一个JavaScript文件（例如api.js）。
导入Axios库。
创建一个Axios实例并设置默认配置（如超时时间、请求头）。
封装请求方法（如get()、post()），在方法中使用Axios实例发送请求。
封装响应拦截器，在响应数据返回时对其进行处理（如转换为指定格式）。
封装请求拦截器，在发送请求之前对其进行处理（如添加请求头、设置超时时间）。

四、二次封装Axios的注意事项

封装后的Axios实例应为单例，以避免创建多个实例并提高性能。
在封装请求方法时，应考虑不同请求方式的特点（如GET和POST的处理方式可能不同）。
在封装响应拦截器时，应考虑不同响应状态码的处理方式（如200表示成功，404表示失败）。
在封装请求拦截器时，应考虑在请求头中添加必要的认证信息（如token）。

五、二次封装Axios的实战案例

以下是一个使用二次封装Axios的实战案例：

// api.js
import axios from 'axios';

// 创建Axios实例
const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 10000,
});

// 封装get请求方法
export const get = (url, params) => {
  return instance.get(url, { params });
};

// 封装post请求方法
export const post = (url, data) => {
  return instance.post(url, data);
};

// 封装put请求方法
export const put = (url, data) => {
  return instance.put(url, data);
};

// 封装delete请求方法
export const del = (url) => {
  return instance.delete(url);
};

// index.js
import { get, post, put, del } from './api';

// 发送get请求
get('/users').then((res) => {
  console.log(res.data);
});

// 发送post请求
post('/users', { name: 'John Doe' }).then((res) => {
  console.log(res.data);
});

// 发送put请求
put('/users/1', { name: 'Jane Doe' }).then((res) => {
  console.log(res.data);
});

// 发送delete请求
del('/users/1').then((res) => {
  console.log(res.data);
});