axios二次封装，你不得不知的秘密

Android

2023-05-06 12:23:51

二次封装Axios，优化HTTP请求体验

作为一款优秀的HTTP库，Axios凭借其易用性和灵活性，深受开发者喜爱。然而，在实际开发中，Axios的默认配置并不总是能够满足项目需求。此时，二次封装便应运而生，它使开发者能够根据需要，定制Axios的行为。

二次封装的必要性

Axios默认配置的局限性主要体现在以下几个方面：

基础路径： Axios默认的基础路径是根目录(/)，对于部署在子目录下的API，需要手动修改。
超时时间： Axios默认的超时时间为10秒，在某些情况下可能需要调整。
状态码： Axios默认只处理200到299之间的状态码，对于自定义的状态码处理，需要额外的配置。
请求主体格式化： Axios默认不会格式化请求主体，需要手动处理。
请求失败处理： Axios默认不会处理请求失败的情况，需要手动捕获异常。

如何二次封装Axios

二次封装Axios的过程十分简单，只需要创建一个新的JavaScript文件，并编写相应的配置代码即可。以下代码示例展示了如何修改Axios的默认配置：

import axios from 'axios';

// 创建一个新的axios实例
const instance = axios.create({
  // 设置基础路径
  baseURL: 'http://example.com/api/',
  // 设置超时时间
  timeout: 30000,
  // 设置状态码范围
  validateStatus: function(status) {
    return status >= 200 && status < 500;
  },
  // 设置请求主体格式化
  transformRequest: [function(data, headers) {
    // 把对象转换成字符串
    return qs.stringify(data);
  }],
  // 设置请求失败的处理
  catch: function(error) {
    // 在这里处理请求失败的情况
    console.log(error);
  }
});

// 使用新的axios实例
instance.get('/users').then(function(response) {
  console.log(response.data);
});