揭秘:Axios二次封装为何如此刚需？

前端

2022-11-08 00:55:51

解锁前端开发秘诀：掌握 Axios 二次封装

在前端开发中，与后端接口的交互是家常便饭。Axios 作为一款流行的 HTTP 请求库，简化了这一过程。然而，为了满足项目需求，二次封装 Axios 至关重要。

Axios 二次封装的优势

二次封装 Axios 为我们带来以下优势：

提升可维护性： 将接口交互代码整合到一个模块中，便于维护和管理。
提高可扩展性： 只需在模块中添加新接口，无需修改其他代码。
增强复用性： 封装后的模块可在多个项目中重复利用，减少代码冗余。

Axios 二次封装基础

二次封装 Axios 涉及以下操作：

环境变量配置： 通过环境变量配置请求地址和参数。
请求格式转换： 将请求参数转换为 JSON、XML 或表单数据等格式。
请求头配置： 设置请求头信息，例如 Content-Type 和 Authorization。
响应状态码处理： 根据不同响应状态码采取相应措施，如 200（成功）和 404（未找到）。
资源凭证配置： 管理 Cookie 和 Token 等资源凭证。
接口导出： 导出封装后的接口，方便其他模块使用。

Axios 二次封装示例

以下是二次封装 Axios 的示例代码：

// 创建 Axios 实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + localStorage.getItem('token')
  }
});

// 发送 GET 请求
axiosInstance.get('/users').then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

// 发送 POST 请求
axiosInstance.post('/users', {
  name: 'John Doe',
  email: 'john.doe@example.com'
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});