个人技术博客 ———— 微信小程序中 Axios 使用总结

[222200202王子豪]

这个作业属于哪个课程	2024年秋-软件工程&实践-W班
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	软件工程实践个人总结
其他参考文献	构建之法

个人技术总结

1. 概述：

在微信小程序开发中，进行网络请求是常见且基础的需求。通过 Axios 请求库可以简化 HTTP 请求的管理与封装。由于微信小程序本身提供了 wx.request API，但在实际开发中，手动处理每个请求和响应，代码冗长且难以管理，因此，我在项目中选择使用 Axios 来处理网络请求。学习并使用 Axios 不仅能简化代码，还能提高代码的可维护性，尤其是在请求拦截、错误处理和请求重试机制方面。

2. 技术详述：

2.1 选择 Axios 的原因

• 封装请求：Axios 提供了便捷的 API，能够高效管理不同接口的请求。相比微信原生的 wx.request，使用 Axios 使得代码更加简洁，封装性更好。
• 拦截器：Axios 允许设置请求和响应的拦截器，便于统一处理请求前后的操作，例如 token 的自动携带和响应错误的统一处理。
• Promise 支持：Axios 本身是基于 Promise 的，可以很好地与 async/await 配合，增强代码的可读性。

2.2 在微信小程序中集成 Axios

在微信小程序中使用 Axios，首先需要将 Axios 库引入并进行封装。可以通过 npm 安装或直接引入 CDN 地址。

1. 安装并引入 Axios

npm install axios --save

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

// utils/request.js
import axios from 'axios';

const request = axios.create({
  baseURL: 'https://api.example.com', // 设置请求的基础 URL
  timeout: 5000, // 设置超时时间
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器：可以在请求头中添加 token
request.interceptors.request.use(config => {
  const token = wx.getStorageSync('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);
});

export default request;

总结：

通过使用 Axios，我有效地简化了微信小程序中的网络请求处理，提高了代码的可维护性。封装请求、统一错误处理、请求重试等技术手段，使得项目的网络层更稳定、可扩展。同时，通过这次实践，我也进一步理解了 HTTP 请求和响应的处理流程，为后续的项目开发积累了宝贵经验。