详解微信小程序的 request 封装示例

我们来详细讲解一下“详解微信小程序的 request 封装示例”的完整攻略。

1. 简介

本文将详细介绍微信小程序中的 request 封装示例，其中将包含两个具体的示例说明。request 是微信小程序中进行网络请求的 API，但直接使用该 API 进行网络请求有一定的局限性，因此，本文将介绍如何进行 request 的封装，以便于开发者更加便捷地进行网络请求。

2. request 封装示例说明

2.1 示例一

首先，我们来看一下如何进行 request 的基本封装。在这个示例中，我们将封装一个 request 工具函数，使用该工具函数可以进行 GET 和 POST 请求，并且能够处理请求的成功和失败回调，以及请求的头部信息和数据。

下面是示例代码：

function request(url, method, data, header = {}) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      method: method,
      data: data,
      header: header,
      success: res => {
        resolve(res.data)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

// GET 请求示例
request('http://example.com/api', 'GET', {}).then(res => {
  console.log(res)
}).catch(err => {
  console.error(err)
})

// POST 请求示例
request('http://example.com/api', 'POST', { data: 'example' }, { 'Content-Type': 'application/json' }).then(res => {
  console.log(res)
}).catch(err => {
  console.error(err)
})

在这个示例代码中，我们定义了一个 request 函数来进行网络请求。在这个函数中，我们使用了 wx.request 来发起 GET 或 POST 请求，并且使用 Promise 解决了异步回调的问题。在调用 request 函数时，我们需要传递至少三个参数，分别是请求的 URL、请求的方法和请求的数据（可选），同时还可以额外传递一个包含请求头部信息的参数。在请求成功时，会执行 Promise 的 resolve 函数，将请求结果返回给调用方；在请求失败时，会执行 Promise 的 reject 函数，将错误信息返回给调用方。

2.2 示例二

接下来，我们来看一个稍复杂一些的示例。该示例实现了从服务器获取数据的功能，其中包含了请求数据、处理数据、显示数据等多个步骤。

下面是示例代码：

// index.js
import request from '../../utils/request.js'

Page({
  data: {
    list: []
  },
  onLoad() {
    this.getData()
  },
  getData() {
    request('http://example.com/api', 'GET', {}).then(res => {
      const list = this.handleData(res.data)
      this.setData({ list })
    }).catch(err => {
      console.error(err)
    })
  },
  handleData(data) {
    // 处理数据的逻辑
    return []
  }
})

// request.js
function request(url, method, data, header = {}) {
  wx.showLoading({ title: '正在加载中...', mask: true }) // 显示加载弹窗
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      method: method,
      data: data,
      header: header,
      success: res => {
        wx.hideLoading() // 请求成功后隐藏加载弹窗
        if(res.statusCode === 200) {
          resolve(res.data)
        } else {
          reject(new Error('请求失败'))
        }
      },
      fail: err => {
        wx.hideLoading() // 请求失败后隐藏加载弹窗
        reject(err)
      }
    })
  })
}

export default request

在这个示例代码中，我们在 index.js 中定义了一个 Page，其中实现了从服务器获取数据、处理数据和显示数据的流程。在 onLoad 方法中调用了 getData 方法以获取数据。在 getData 方法中，调用了 request 函数进行网络请求，并将请求结果传递给 handleData 方法进行处理。在 handleData 方法中，我们可以根据实际需求进行数据处理的逻辑。

在 request.js 中，我们封装了一个 request 函数，该函数会在请求开始时显示一个加载弹窗，并在请求结束时隐藏弹窗。同时，我们还在请求成功时进行了状态码判断，如果状态码为 200，则说明请求成功，将请求数据返回，并承诺该 Promise；否则，将请求失败的错误信息承诺给 Promise。在请求失败时，同样需要将错误信息承诺给 Promise。

通过这个示例，我们可以看出，将 request 进行封装后，不仅可以提高代码的复用率，还可以更加方便地进行网络请求，同时，对错误的处理也更加灵活。