快看！微信小程序请求封装优雅化指南，让开发更轻松！

前端

2023-09-20 21:41:04

为何封装微信小程序请求？

在微信小程序中，使用原生的wx.request进行网络请求时，经常会遇到以下问题：

代码量繁琐： wx.request需要传入多个参数，包括url、method、data等，这使得代码量变得非常繁琐，尤其是当需要发送多个请求时，代码会变得难以阅读和维护。
回调地狱： wx.request采用回调函数的方式处理请求结果，这很容易造成回调地狱，即在回调函数中嵌套另一个回调函数，如此循环下去，代码结构变得混乱，难以调试和维护。
难以维护： 当需要修改网络请求时，使用原生的wx.request需要修改多个地方，包括url、method、data等，这很容易遗漏一些细节，导致请求失败。

为了解决这些问题，我们可以利用Promise对微信小程序请求进行封装，这样可以大大减少代码量，提高代码的可维护性，并避免回调地狱。

如何封装微信小程序请求？

1. 引入Promise

首先，我们需要引入Promise，Promise是一种异步编程解决方案，它可以使代码更加简洁和易于维护。在微信小程序中，我们可以使用Promise.prototype.finally方法来处理请求结果。

import {Promise} from '@types/promise';

2. 创建一个封装函数

接下来，我们需要创建一个封装函数，这个函数将接收一个参数，即请求配置对象，并返回一个Promise对象。请求配置对象可以包括url、method、data等属性。

function reqWrapper(config: any): Promise<any> {
  return new Promise((resolve, reject) => {
    wx.request({
      ...config,
      success: (res) => {
        resolve(res.data);
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
}

3. 使用封装函数发送请求

现在，我们就可以使用封装函数来发送请求了。我们只需将请求配置对象作为参数传入封装函数，然后就可以得到一个Promise对象。

reqWrapper({
  url: 'https://www.example.com/api/v1/users',
  method: 'GET',
}).then((res) => {
  console.log(res);
}).catch((err) => {
  console.log(err);
});