小程序request封装，仅需1分钟！复用性极高-CFANZ编程社区

小程序的火爆是大家有目共睹的，尤其是今年受疫情影响，直播更是加快了小程序的发展。

封装前言

小程序开发中都会调用后端工程师开发的API，小程序的开发文档提供了相对实用的API，wx.request()，但是在开发的过程中，又遇到了一些问题在小程序的项目开发时，调用的API不止一个，同一个API不止调用一次。

同时，对于调用的API的管理也十分复杂，这样的背景下，对wx.request()方法的封装变得尤为重要。今天我们会从0开始实现一个简单的网络请求封装。

如何进行二次封装

为了暴露项目的接口地址，我们需要在项目的根目录下面创建一个文件，我取名叫config.js，这个文件的目的是配置项目的接口地址，如果后面接口地址有改变，这里可以快速切换，内容如下

const config = {
  api_base_url: 'https://api.08510920.com/index.php/api/v1/'
};
export { config };

在封装之前，我们需要搞清楚封装的目的和需要实现怎样的效果

1，统一管理请求接口

2，统一处理错误

3，封装request，并return

4，实现分离操作

然后在项目的utils目录中新建http类，这个类就是我们最终要实现封装的类文件

import {
  config
} from '../config.js'


const tips = {
  1: '系统繁忙',
  201: '您尚未授权登录'
}
class HTTP {
  request(params) {
    wx.showLoading({
      title: '加载中...',
    })
    if (!params.method) {
      params.method = "GET"//默认请求方法
    }
    let token = wx.getStorageSync("token") //正式环境 token
    wx.request({
      url: config.api_base_url + params.url,
      method: params.method,
      data: params.data,
      header: {
        'Accept': 'application/json',
        'token': wx.getStorageSync("token")
      },
      success: (res) => {
        let code = res.statusCode.toString()
        let error_code = res.data.code
        if (code.startsWith('2')) {
          if (error_code == 201) {//如果检测接口状态返回201，则提示后跳转登录
            this._showLoginModal()
            return false
          }
          params.success && params.success(res.data)
        } else {
          this._show_error(error_code)//接口请求发生错误提示
        }
      },
      fail: (err) => {
        this._show_error(1)
      },
      complete: (com) => {
        setTimeout(function() {
          wx.hideLoading()
        }, 500)
      }
    })
  }


  _show_error(error_code) {
    if (!error_code) {
      error_code = 1
    }
    const tip = tips[error_code]
    wx.showToast({
      title: tip ? tip : tips[1],
      icon: 'none',
      duration: 2000
    })
  }
  // 201表示未登录，跳转登录
  _showLoginModal() {
    wx.showModal({
      title: '提示',
      content: '你还未登录，登录后可获得完整体验 ',
      confirmText: '一键登录',
      success(res) {
        // 点击一键登录，去授权页面
        if (res.confirm) {
          setTimeout(() => {
            wx.reLaunch({
              url: '/pages/load/load',
            })
          },500)
        }else{
          wx.navigateBack()
        }
      }
    })
  }




}


export {
  HTTP
}

一个完整的请求封装已经完成，下面我将介绍如何更优雅的使用这个请求库。

更简洁的使用方式

在项目目录下面新建一个文件夹叫做model，名字是很熟悉的，对吧？这个文件夹的作用就是将所有的请求方法封装到里面，类似于PHP中的模型文件。

新建一个实例User模型文件，文件名user.js，内容如下

import {
  HTTP
} from '../utils/http.js'
class UserModel extends HTTP {
  login(data, sCallback) {
    this.request({
      url: 'user/login',
      data: data,
      success: (res) => {
        sCallback(res)
      }
    })
  }
}


export {
  UserModel
}