基于微信小程序的 wx.request 的高级封装 --weReq

前言

随着微信小程序的日益普及，...... 直接进入主题，相信大部分开发者在写小程序时，会遇到原生小程序网络请求的局限性比如以下几个问题：

复杂的异步请求处理 ：在传统的 wx.request 中，我们常常需要处理回调地狱的异步请求，导致代码逻辑混乱，阅读起来也比较费力。尤其是在请求数据需要逐步执行的场景下，维护这些请求非常困难。
请求前后的统一管理：在开发过程中，往往会遇到需要在请求前做一些统一处理（如添加 token、设置全局 loading 等），以及在请求后对返回结果做统一处理（如错误处理、数据格式转换等）。这时如何在代码中优雅地管理这些逻辑成了开发中的一大难题。
登录态的管理 ：小程序中的登录态通常通过 session_key 来维持。然而，session_key 很可能会在某些情况下过期，导致用户请求失败。为了提供良好的用户体验，我们需要自动处理登录态过期的情况，而不干扰用户操作。
全局 loading 状态的管理：在进行多个网络请求时，开发者往往需要在请求发起时显示加载动画，而请求完成后则需要隐藏它。每个请求都要手动处理 loading 状态，导致代码重复，增加了开发的复杂性。

什么是 `weReq`？

weReq 是一个为微信小程序量身定制的网络请求工具，它是对微信小程序原生的 wx.request 的封装，具备更加强大和易用的功，weReq 通过引入 Promise、全局拦截器、自动登录等机制，使得开发者在使用过程中能更轻松地处理请求，减少冗余代码，并大大提升了开发效率。

`weReq` 的特性和优势

1. 支持 Promise API，避免回调地狱

weReq 支持 Promise API，允许开发者使用 async/await 或 then/catch 方式处理异步请求。这不仅让代码更加简洁易懂，还能避免回调地狱的问题。

示例：

javascript 复制代码

weReq.get({ url: '/endpoint' })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

使用 async/await 的方式：

vbnet 复制代码

async function fetchData() {
  try {
    const response = await weReq.get({ url: '/endpoint' });
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

这样一来，开发者就能够用更简洁的代码来实现复杂的请求逻辑，大大提高了代码的可读性和维护性。

2. 内置请求和响应拦截器

weReq 提供了请求和响应拦截器的机制，可以在请求发起前、响应返回后进行统一处理。例如，你可以在请求发起之前自动添加 token，或在响应返回之后统一处理数据格式和错误信息。

请求拦截器：

ini 复制代码

weReq.setRequestInterceptor(config => {
  config.header.Authorization = 'Bearer ' + getToken();
  return config;
});

响应拦截器：

kotlin 复制代码

weReq.setResponseInterceptor(response => {
  if (response.data.errorCode !== 0) {
    throw new Error(response.data.errorMessage);
  }
  return response.data;
});

通过这种方式，你可以统一管理请求前和响应后的处理逻辑，不需要在每个请求中重复编写相同的代码。

3. 自动登录功能

在小程序开发中，session_key 的过期是一个常见的问题。用户的登录态过期后，再发起请求就会失败。如果每个请求都需要开发者手动处理登录态管理，显然是非常麻烦的。weReq 的自动登录功能解决了这个问题。

当 session_key 过期时，weReq 会自动尝试重新登录，整个过程对开发者是透明的，用户也几乎感知不到。你只需要在初始化时配置自动登录相关的参数，weReq 会在后台自动完成登录逻辑。

示例：

php 复制代码

const weReq = Request.init({
  baseURL: 'https://api.example.com',
  reLoginConfig: {
    reTokenConfig: {
      url: '/refresh_token',
      method: 'POST',
      success: (res) => {
        wx.setStorageSync('token', res.data.token);
      }
    },
    isTokenExpiredFn: (res) => res.code === -220,
  }
});

当检测到 token 过期时，weReq 会自动尝试获取新的 token 并重新发起请求。

4.自动展示和隐藏 Loading

weReq 还内置了基于 wx.showLoading 的全局加载框。当发起请求时，weReq 会自动展示加载提示，确保用户看到操作正在进行。当请求完成后，weReq 会自动隐藏加载框。这为开发者提供了极大的便利，避免了每次发起请求都手动管理 loading 状态。

示例：

javascript 复制代码

weReq.get({
  url: '/endpoint',
  loading: true, // 自动显示加载框
})
.then(response => {
  console.log(response);
})
.catch(error => {
  console.error(error);
});

通过这种方式，开发者不需要手动在每个请求中写上 wx.showLoading 和 wx.hideLoading，减少了重复代码。

总结

weReq 作为微信小程序的一个高级网络请求封装工具，通过引入 Promise API 、请求拦截器 、自动登录 和 全局 loading 等功能，极大地提升了开发者的工作效率，简化了网络请求管理。它解决了开发者在进行小程序开发时，常常会遇到的异步请求管理、登录态过期处理、重复代码等问题。

对于开发者来说，使用 weReq 可以避免从零开始实现这些功能，节省大量的开发时间和精力。同时，它提供了一个清晰、易于管理的请求结构，极大地提高了代码的可维护性和扩展性。

因此，无论是在开发新小程序还是维护现有小程序时，weReq 都是一个非常值得考虑的网络请求工具。

更详细的文档和demo以及源码可以看这里github.com/yydongwang/... 记得给个star哦。

基于微信小程序的 wx.request 的高级封装 --weReq

前言

什么是 weReq？

weReq 的特性和优势

1. 支持 Promise API，避免回调地狱

2. 内置请求和响应拦截器

3. 自动登录功能

4.自动展示和隐藏 Loading

总结

什么是 `weReq`？

`weReq` 的特性和优势