小程序请求封装

背景

在小程序中对服务器发送https请求使用的是自带函数wx.request(obj)，参数是一个对象，对象包括了以下

wx.request({
    url: 'someUrl' //请求地址，必填
    method:'GET' //默认为GET,注意必须大写
    header:'someHeader' //设置请求头，其中content-type默认为application/json
    data:{somedata} //可以是字符串，对象，ArrayBuffer(二进制数组）
    success:function (){} 
//请求成功的回调函数，注意如果statusCode不是200或403也会
//执行该回调函数。所以封装的时候会对状态码进行判断
})
    fail:function(){
    wx.showToast( //
  {
     title: 'some tiltle',//提示信息
     icon:'some icon' //提示图标
     duration:2000 //提示时间
  })
  
} //请求失败回调函数，通常只有断网的情况会走该函数

当然wx.request()方法的参数对象属性列表不止以上内容，只是对目前常用的属性做了介绍。如果每一次调用请求的时候都要写这么多重复的代码显然是不明智的，所以我们要对请求方法进行一次封装。

封装

首先我们可以定义config，把常用的属性值写进config

const config = {
  let api_base_url:'yourBaseUrl'
  //something else
}
export {config}
//别忘了把config暴露出去

//导入config，注意es6导入目前只能用相对路径
import {config} from '../config.js'

class HTTP {
  request (params) {
    wx.request({
      url: config.api_base_url + params.url, //拼接请求地址
      method: params.method || 'GET', //当没有给定请求方法时默认为GET
      data: params.data || {},
      //合并请求头或默认请求头
      header: params.header ? Object.assign(config.header, params.header):config.header 
      success: (res) => {
        let code = res.statusCode.toString() //状态码
        if (code.startsWith('2') || code === '304') {
          params.success && params.success(res.data)
        } else {
          params.fail && params.fail(res.data)
          let error_code = res.data.error_code
          this._show_error(error_code)
        }
      },
      fail: (err) => {
        params.fail && params.fail(res.data)
        this._show_error(1)
      }
    })
  }
    
  // 私有方法，显示请求错误信息
//其中error_code需要服务端定义，若没有可省略以下部分。直接wx.showToast()
  _show_error(error_code) {
    if (!error_code) {
      error_code = 1
    }
    const tip = config.tips[error_code]
    wx.showToast({
      title: tip ? tip : tips[1],
      icon: 'none',
      duration: 2000
    })
  }
}
···