微信小程序封装网络请求代码详细解析

Sure! 微信小程序中，可以使用 `wx.request` 方法来进行网络请求，但是如果在多个页面中都需要进行网络请求时，每一个页面都使用 `wx.request` 方法来写请求代码就会显得重复冗余，不便于维护。因此，我们可以将网络请求的代码封装成一个公共的方法，让多个页面都可以调用，提高代码复用性和可维护性。

下面是一个简单的网络请求封装代码的示例：

// api.js

const API_BASE_URL = 'https://api.example.com'

const request = (url, method, data) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: `${API_BASE_URL}/${url}`,
      method: method,
      data: data,
      header: {
        'content-type': 'application/json', // 根据实际情况设置请求头
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data) // 请求成功，返回数据
        } else {
          reject(res) // 请求失败，返回错误信息
        }
      },
      fail: (err) => {
        reject(err) // 网络请求失败，返回错误信息
      },
    })
  })
}

module.exports = {
  request,
}

上述代码定义了一个 `request` 方法，该方法接收三个参数：请求的 `url`、请求的 `method`、请求的 `data`。在方法中，我们使用 `wx.request` 方法来发送网络请求，并通过 `Promise` 对象来处理请求结果。请求成功时，会调用 `resolve` 方法来返回请求结果，请求失败时，会调用 `reject` 方法来返回错误信息。最后，将 `request` 方法通过 `module.exports` 导出，供其他文件调用。

在调用网络请求时，我们只需要在需要的页面中引入 `api.js` 文件，然后调用 `request` 方法即可：

// index.js

const api = require('../../utils/api.js')

Page({
  data: {
    // ...
  },

  onLoad: function () {
    api.request('users', 'GET')
      .then((res) => {
        console.log(res) // 输出请求结果
      })
      .catch((err) => {
        console.log(err) // 输出错误信息
      })
  },
})

上述代码中，在页面的 `onLoad` 生命周期中，我们调用了 `api.js` 中的 `request` 方法，并传入请求的 `url` 和 `method`。请求成功时，输出请求结果；请求失败时，输出错误信息。

这样，我们就完成了一个简单的网络请求封装代码，可以方便地在多个页面中进行调用。当然，实际开发中，我们还需要考虑请求参数的校验、请求头的设置、请求结果的处理等问题。