微信小程序（十八）——封装request请求(ajax)请求后台接口

官方的request请求：

wx.request(OBJECT)

wx.request发起的是https请求。一个微信小程序，同时只能有5个网络请求连接。

OBJECT参数说明：

参数名	类型	必填	说明
url	String	是	开发者服务器接口地址
data	Object、String	否	请求的参数
header	Object	否	设置请求的 header , header 中不能设置 Referer
method	String	否	默认为 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
success	Function	否	收到开发者服务成功返回的回调函数，res = {data: '开发者服务器返回的内容'}
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：

wx.request({
  url: 'test.php',
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'Content-Type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  }
})

但是调用很多接口的时候，会非常频繁的使用request,所以现在做一下简单的封装：放在公共函数util文件中

代码：

/**
   * 封装ajax请求方法，加入header，loading效果
   * url 请求地址的uri
   * data 请求数据
   * method 请求数据类型，默认GET请求
   * success 成功回调函数
   * fail 失败回调函数 
   */
  ajax(url, data, method, success, fail, loading = true) {
    if(loading){
      wx.showLoading({
        title: '正在加载中...',
      });
    }
    let _this = this;
    wx.request({
      url: _this.base_url + url,
      data: data,
      method: method || 'GET',
      header: {
        'Authorization': 'Bearer ' + (wx.getStorageSync('token') || '')
      },
      success: (res) => {
        if(res.statusCode == 200){
          if (typeof success == 'function') {
            success(res.data);
          }
        }else if (res.statusCode == 401){
          wx.showModal({
            title: '错误提示',
            content: '当前您还未登录，请先登录',
            success: res => {
              if (res.confirm) {
                wx.switchTab({
                  url: '../user/index',
                })
              }
            }
          })
        } else {
          if (typeof fail == 'function') {
            fail();
          }
        }  
      },
      fail: res => {
        
      },
      complete: () => {
        wx.hideLoading();
      }
    })
  },

在其他.js中引入

var util = require('../../utils/util.js');




  util.ajax(url, userInfo, 'POST', res => {

          })