微信小程序中网络请求的简单封装

1. 概述

在微信小程序开发中，经常需要进行网络请求，小程序提供的wx.request API已经够用，但是每次请求都需要写一遍请求的地址、参数、方法等，有时候还需要对返回的数据进行处理，这样会显得有些冗余，且不利于维护。因此，对wx.request进行简单的封装，可以提高代码的健壮性和可维护性。

2. 实现

2.1 封装方法

比较常用的封装方法是通过Promise来封装

/**
 * 网络请求
 * @param url 请求地址
 * @param params 请求参数
 * @param method 请求方法，默认为GET
 * @returns {Promise}
 */
function request(url, params = {}, method = 'GET') {
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      data: params,
      method: method,
      header: {
        'content-type': 'application/json'
      },
      success(res) {
        resolve(res)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

这样，每次请求时，只需要调用request方法即可。

2.2 调用方法

使用封装的网络请求，只需要将请求地址、参数、请求方法作为参数传入request方法中即可。

request('http://www.example.com/api', {id:1})
  .then(res => {
    console.log(res.data)
  })
  .catch(err => {
    console.log("请求失败：", err)
  })

2.3 错误处理

由于封装的request方法只返回了成功和失败的结果，如果需要对返回的数据进行业务处理，可以通过Promise的resolve回调函数来进行数据的处理。

request('http://www.example.com/api', {id:1})
  .then(res => {
    if (res.data.code === 0) {
      return res.data.data
    } else {
      throw new Error(res.data.msg)
    }
  })
  .then(data => {
    console.log(data)
  })
  .catch(err => {
    console.log("请求失败：", err)
  })

在上述代码中，如果网络请求成功返回了数据，首先判断接口返回数据中的code值是否为0，表示请求成功，然后将返回的数据赋值给data变量，进一步进行业务处理。

如果code不为0，则通过throw抛出一个异常，在.catch中进行处理。

2.4 添加Loading

在进行网络请求时，可能会出现较长时间的等待，此时可以添加Loading提示来提升用户体验，在请求成功或失败后隐藏Loading。

// index.js
let util = require('../../utils/util.js')
Page({
  data: {
    loading: false,
    dataList: []
  },
  onLoad() {
    this.getData()
  },
  getData() {
    this.setData({loading: true})
    util.request('http://www.example.com/api', {id:1})
      .then(res => {
        console.log(res.data)
        this.setData({
          dataList: res.data,
          loading: false
        })
      })
      .catch(err => {
        console.log("请求失败：", err)
        this.setData({loading: false})
      })
  }
})
// util.js
function request(url, params = {}, method = 'GET') {
  wx.showLoading({
    title: '加载中'
  })
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      data: params,
      method: method,
      header: {
        'content-type': 'application/json'
      },
      success(res) {
        resolve(res)
      },
      fail(err) {
        reject(err)
      },
      complete() {
        wx.hideLoading()
      }
    })
  })
}
module.exports = {
  request: request
}

在进行网络请求前，调用wx.showLoading方法显示Loading提示，在请求成功或失败后，调用wx.hideLoading方法隐藏Loading提示。

3. 总结

封装微信小程序的网络请求，可以减少代码冗余，提高代码的可维护性和健壮性。在封装时，一般采用Promise来进行网络请求的异步处理，可以通过Promise的resolve和reject函数来处理请求成功和失败的结果。另外，如果需要在网络请求时添加Loading提示，可以在封装的方法中调用wx.showLoading和wx.hideLoading方法。