微信小程序如何使用Promise对wx.request()封装详解(附完整代码)

请看以下内容。

微信小程序如何使用Promise对wx.request()封装详解

在微信小程序中，我们经常会使用到网络请求，如调用微信的APIwx.request()来获取接口数据。但是wx.request()并没有返回Promise，如果需要使用Promise的话，就需要对其进行封装。

Promise概念简介

在这里简要介绍一下Promise的概念：Promise是异步编程的一种解决方案。它可以将异步操作包装成一个对象，使得可以使用类似于同步操作的方式来使用异步操作，避免了回调函数嵌套，让代码更易于理解和维护。

一个Promise有三种状态：

• Pending（等待态）：初始状态，不是成功或失败状态。
• Fulfilled（成功态）：表示操作成功完成，Promise对象有返回值。
• Rejected（失败态）：表示操作失败，Promise对象有错误原因。

封装wx.request()为Promise

下面是封装wx.request()为Promise的完整代码。我们把它命名为requestByPromise：

function requestByPromise(url, method, data) {
  return new Promise(function(resolve, reject) {
    wx.request({
      url: url,
      method: method,
      data: data,
      success: function(res) {
        resolve(res.data);
      },
      fail: function(error) {
        reject(error);
      }
    })
  })
}

可以看到，我们将wx.request()包裹在一个Promise中，返回Promise对象，以供使用。具体实现如下：

• 在requestByPromise中，使用return语句返回一个Promise对象。
• 将wx.request()封装到这个Promise对象里面。
• 在success回调中，使用回调函数参数res调用resolve函数将其结果返回。
• 在fail回调中，使用回调函数参数error调用reject函数将错误返回。

使用requestByPromise发送GET请求

下面是应用requestByPromise发送GET请求的示例代码：

requestByPromise('https://www.example.com/api/getdata', 'GET', {}).then(
  function(data) {
    console.log(data)
  },
  function(error) {
    console.log(error)
  }
)

可以看到，使用requestByPromise发送GET请求非常简单，只需要调用requestByPromise函数并传入请求参数（URL、请求方法（GET或者POST）、数据等）。接着，使用两个回调函数来处理请求成功和失败的返回结果。

使用requestByPromise发送POST请求

同样地，下面是应用requestByPromise发送POST请求的示例代码：

requestByPromise('https://www.example.com/api/postdata', 'POST', { name: 'John', password: '123456' }).then(
  function(data) {
    console.log(data)
  },
  function(error) {
    console.log(error)
  }
)

和发送GET请求类似，我们只需要将请求方法设置为POST，并在第三个参数中传入POST请求所需的数据即可。

综上所述，我们通过简单的Promise封装对微信小程序的wx.request()进行了封装，并通过两个示例展示了如何使用这个封装函数来快速发送GET和POST请求。这种方式使代码更加简洁易懂，同时也方便日后的维护和扩展。