vue2的axios的二次封装

Vue.js 的 axios 二次封装是为了优化使用体验、增强功能或者简化特定操作而对原生 axios 库所做的修改。封装通常包含以下几个方面的改进：

### 通用配置处理
原生的 axios 提供了基本的请求和响应拦截功能，但在二次封装中可能会增加更多的通用配置选项，比如统一设置超时时间、请求头等，以便于在整个应用中复用。

### 错误处理机制
封装版本会引入更详细的错误处理策略，例如区分网络错误、服务器错误或其他未知错误，并提供友好的错误信息给用户界面显示，同时便于开发者调试和追踪错误原因。

### 异步处理
通过 Promise 风格的返回值和 `.then()`/.`catch()` 方法简化异步流程的管理。封装后的函数将返回一个 promise 对象，这使得代码的编写更加同步化，易于理解和维护。

### 请求合并及缓存
一些高级封装可能会整合请求到一个全局的队列中并实现请求的合并或分发，以及基于缓存的策略，如 LRU 缓存机制，避免不必要的重复请求提高性能。

### 动态URL和请求参数
封装允许动态构建 URL 和请求参数，支持使用占位符或表达式动态生成，这对于需要频繁变化请求地址的应用场景非常有用。

### 状态码检查
封装中可能会添加额外的状态码检查逻辑，比如对成功的状态码（如 `200 OK`）进行特别处理，对于非期望结果进行异常抛出或者特殊提示处理。

### 拦截器扩展
除了基础的拦截器外，二次封装可以提供更多自定义的拦截逻辑，比如日志记录、API 访问统计、请求前预处理数据、响应后后处理数据等功能。

### 实例化和共享
封装通常会创建一个单实例的 axios 实例，这样可以确保整个应用共享相同的请求行为，避免每个组件都创建独立的 axios 实例导致资源浪费。

### 示例代码：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 添加请求拦截器
instance.interceptors.request.use(config => {
  // 在发送请求之前做某些事情，例如设置 token 或者添加其他 header 参数
  if (localStorage.getItem('token')) {
    config.headers.Authorization = localStorage.getItem('token');
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(response => {
  // 处理成功响应，例如验证响应体是否符合预期结构
  return response.data;
}, error => {
  // 如果响应失败，则根据状态码进行相应的错误处理
  switch (error.response.status) {
    case 401:
      // 用户未授权
      break;
    default:
      console.log(`HTTP Error ${error.response.status}`);
  }
  return Promise.reject(error);
});

export default instance;

---

### 相关问题 - Vue2的axios二次封装的作用是什么？

1. **增强功能**：通过添加更多定制化的功能，满足项目中特定的需求，例如日志记录、API 统计分析等。

2. **简化代码**：提供更简洁、一致性的 API 接口，减少开发者因直接使用原始库带来的冗余代码。

3. **提高维护性**：通过封装，统一了代码风格和处理逻辑，使得后续的维护工作更为简单高效。

4. **提高安全性**：在封装过程中可以加入错误处理和安全校验措施，防止因不当操作引发的安全风险。

5. **性能优化**：通过对请求的合并、缓存机制的实现，可以在一定程度上提升应用的响应速度和资源利用率。

---

请注意，上述示例代码仅用于说明如何进行二次封装，实际应用中可能还需要根据具体需求调整部分逻辑和变量引用。