小程序的request封装「附详细流程」

1. 前言

在开发小程序时，我们会经常用到request请求，但是每次都写重复的代码，非常繁琐，因此我们需要对请求进行封装。下面我将介绍如何对小程序的request进行封装。

2. request封装步骤

2.1 创建封装文件

首先我们需要在utils文件夹下新建一个request.js文件，用于封装request请求。

touch utils/request.js

2.2 定义请求方法

在request.js文件中，我们需要定义一个名为request的函数，用于发送请求，该函数需要传入一个参数，这个参数是一个对象，其中包含了请求的地址、请求的类型、请求的数据等等。

我们可以使用Promise封装请求，并且可以定义一个全局的统一请求头，比如带上token。下面是一个request函数的示例代码。

const request = (params) => {
  // 声明一个Promise对象
  return new Promise((resolve, reject) => {
    // 获取请求地址
    const baseUrl = 'https://api.example.com/'
    const url = baseUrl + params.url
    // 设置请求头
    const header = {
      'content-type': 'application/json',
      'Authorization': 'Bearer ' + wx.getStorageSync('token') // 假设我们需要携带token
    }
    // 发送请求
    wx.request({
      url: url,
      method: params.method || 'GET',
      data: params.data || {},
      header: header,
      success: (res) => {
        resolve(res.data)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}
module.exports = {
  request
}

2.3 在页面中使用request方法

在页面中使用时，我们只需要引入request.js，然后直接调用request方法，传入相应的参数，就可以发送请求了，非常方便。

比如，我们要在index.js中发送一个GET请求，获取用户信息，代码如下：

const request = require("../../utils/request.js")
Page({
  data: {},
  onLoad() {
    this.getUserInfo()
  },
  getUserInfo() {
    const url = 'user/info'
    request({
      url: url,
      method: 'GET',
      data: {
        'id': '123'
      }
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  }
})

2.4 封装全局异常处理

在实际开发中，我们需要对异常进行处理，比如提示用户请求失败等信息。

我们可以在request.js中封装全局异常处理函数，用于处理所有的异常情况。下面是一个封装异常处理的示例代码：

const request = (params) => {
  return new Promise((resolve, reject) => {
    const baseUrl = 'https://api.example.com/'
    const url = baseUrl + params.url
    const header = {
      'content-type': 'application/json',
      'Authorization': 'Bearer ' + wx.getStorageSync('token')
    }
    wx.showLoading({
      title: '加载中...',
    })
    wx.request({
      url: url,
      method: params.method || 'GET',
      data: params.data || {},
      header: header,
      success: (res) => {
        wx.hideLoading()
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          wx.showToast({
            title: '请求失败',
            icon: 'none'
          })
          reject(res)
        }
      },
      fail: (err) => {
        wx.hideLoading()
        wx.showToast({
          title: '请求失败',
          icon: 'none'
        })
        reject(err)
      }
    })
  })
}
module.exports = {
  request
}

3. 总结

通过对小程序request请求进行封装，能够大大提高开发效率，减少重复代码的编写，同时也方便处理异常情况，使代码更加规范、易读。