Axios 是一个基于 Promise 的 HTTP 库，用于浏览器和 Node.js 中发送 HTTP 请求。它提供了非常简洁的 API，支持 GET、POST、PUT、DELETE 等常用请求方式。在前端开发中，Axios 常用于向后端服务器发送请求并处理响应数据。学习 Axios 是因为它简化了 AJAX 请求，支持拦截器、请求取消等高级功能，解决了原生 XMLHttpRequest 和 fetch 的一些限制。

1.技术详述

1.1 安装 Axios

我们通过 npm 安装 Axios：

npm install axios

1.2 请求拦截器和响应拦截器

在 Axios 中，拦截器可以在请求发送前和响应返回后做一些公共操作。

1.2.1 请求拦截器

instance.interceptors.request.use(
  function(config) {
    // 在发送请求前附加 token
    var token = localStorage.getItem("token");
    if (token) {
      config.headers['Authorization'] = 'Bearer ' + token;
    }
    return config;
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

1.2.2 响应拦截器

instance.interceptors.response.use(
  function(response) {
    // 直接返回响应数据
    return response;
  },
  function(error) {
    // 检查错误响应并处理特定的状态码
    if (error.response && error.response.status === 401) {
      // 如果是认证错误，则在控制台输出
      console.log("Authentication failed");
    }
    // 将错误传递下去
    return Promise.reject(error);
  }
);

1.3 请求取消

有时我们需要取消某个请求，比如在用户快速切换页面时，可以避免不必要的请求。Axios 提供了 CancelToken 来实现这一功能。

// 定义取消请求的变量
var cancelRequest;

// 创建axios的CancelToken实例
var cancelTokenSource = axios.CancelToken.source();

// 发起GET请求
instance.get("/users", {
  cancelToken: cancelTokenSource.token // 使用cancel token
})
.then(function(response) {
  // 请求成功时打印响应数据
  console.log(response.data);
})
.catch(function(error) {
  // 检查请求是否被取消
  if (axios.isCancel(error)) {
    console.log("Request canceled", error.message);
  } else {
    // 打印出其他错误
    console.error("Error:", error);
  }
});

// 取消请求的函数赋值
cancelRequest = cancelTokenSource.cancel;

// 执行取消操作
cancelRequest("Operation canceled by the user.");

2.技术详概

2.1 选择 Axios 的原因

拦截功能强化：通过设置拦截器，Axios 优化了请求发送前和接收响应后的统一处理流程。这使得像自动追加 token 和统一处理响应错误等操作变得简单。
优化的请求封装：Axios 的高效 API 简化了对服务请求的管理，相较于微信的 `wx.request`，它让代码更加简洁、封装性更强。
Promise 的完美集成：Axios 基于 Promise 设计，它与 async/await 无缝配合，极大提升了代码的逻辑清晰性和阅读体验。

2.2 在微信小程序中集成 Axios

在微信小程序中使用 Axios，需要将 Axios 库引入并进行封装。

1. 安装并引入 Axios

npm install axios --save

2. 在项目的 utils 目录下创建一个 request.js 文件，进行封装

```javascript
// utils/request.js

import axios from 'axios';

// 创建 axios 实例
const request = axios.create({
  baseURL: 'https://api.example.com', // 设定基准 URL
  timeout: 5000, // 定义请求超时时长
  headers: {
    'Content-Type': 'application/json' // 设置默认请求头
  }
});

// 设置请求拦截器，用于在请求头中携带 token
request.interceptors.request.use(
  (config) => {
    // 从本地存储获取 token
    const token = wx.getStorageSync('token');
    // 如果 token 存在，则在请求头中携带
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 设置响应拦截器，用于统一处理错误
request.interceptors.response.use(
  (response) => {
    // 直接返回响应数据
    return response.data;
  },
  (error) => {
    // 弹窗提示请求错误
    wx.showToast({
      title: '请求失败',
      icon: 'none'
    });
    return Promise.reject(error);
  }
);

// 导出 axios 实例
export default request;

2.3 遇到的问题：请求失败时无法统一处理

在项目中，如果多个请求都失败，将难以统一处理错误，尤其是在多个 API 请求时。
解决方案：
使用 Axios 的响应拦截器，在请求失败时统一处理错误。

```javascript
instance.interceptors.response.use(
  response => response,
  error => {
    console.error("Global error handler:", error);
    return Promise.reject(error);
  }
);
```

2.4 问题：跨域请求错误

在开发过程中，遇到了一些跨域问题。浏览器默认会阻止跨域请求。
解决方案：
配置 CORS 代理服务。

instance.defaults.headers.common["Access-Control-Allow-Origin"] = "*";

3.技术总结

Axios, 作为一个强大的 HTTP 客户端库，在我的开发实践中起到了核心作用。它不仅使得微信小程序中的网络请求处理变得更加高效，而且增强了代码的整洁性与可维护性。通过深入研究文档和积极应对实际问题，我不仅解决了使用过程中遇到的挑战，还提升了自己的编程技巧。Axios 的拦截器和请求取消机制允许我优化 HTTP 请求的管理，从而提升用户体验。我实现了请求的封装，统一的错误处理，以及请求重试机制，这些都使项目的网络层变得更加稳定和可扩展。此次经历不仅让我对 HTTP 请求和响应的处理流程有了更深刻的理解，也为我未来的项目开发提供了丰富的经验。

...全文