微信小程序项目request请求优化

这是微信小程序官网API列表里面 wx.request(OBJECT)

官方示例

wx.request({
  url: 'xxxx.php',
  data: {
     x: '' ,
     y: ''
  },
  method:"POST",
  header: {
      'content-type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  }
})

参数说明

参数名	类型	必填	默认值	说明
url	String	是		开发者服务器接口地址
data	Object/String/ArrayBuffer	否		请求的参数
header	Object	否		设置请求的 header，header 中不能设置 Referer。
method	String	否	GET	有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType	String	否	json	如果设为json，会尝试对返回的数据做一次 JSON.parse
responseType	String	否	text	设置响应的数据类型。合法值：text、arraybuffer
success	Function	否		收到开发者服务成功返回的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

优雅的封装

我写在了page的同级目录utils下的utils.js

const requestData = {
  /**
   * url = String 请求地址
   * obj = Object 请求参数
   * success = function 成功回调
   * fail = function 成功回调
   */
  get: (url, data, success, fail) => {
    if ((typeof data) == 'function') {
      if (success && (typeof success) == 'function') {
        fail = success;
      }
      success = data;
      data = '';
      console.log(success, data, fail)
    }
    wx.request({
      url: url,
      data: data || '',
      header: {},
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success(res) {
        if (success) {
          success(res);
        }
      },
      fail(res) {
        if (fail) {
          fail(res);
        }
        wx.hideLoading();
        wx.showToast({
          title: '请求超时',
          icon: 'loading',
          duration: 2000
        })
      },
      complete: function () {
        wx.hideLoading();
      }
    })
  },
  post: (url, data, success, fail) => {
    if ((typeof data) == 'function') {
      if (success && (typeof success) == 'function') {
        fail = success;
      }
      success = data;
      data = '';
      console.log(success, data, fail)
    }
    wx.request({
      url: baseUrl + url,
      data: data || '',
      header: {},
      method: 'POST',
      dataType: 'json',
      responseType: 'text',
      success(res) {
        if (success) {
          success(res);
        }
      },
      fail(res) {
        if (fail) {
          fail(res);
        }
      }
    })
  },
  del: (url, data, success, fail) => {
    if ((typeof data) == 'function') {
      if (success && (typeof success) == 'function') {
        fail = success;
      }
      success = data;
      data = '';
      console.log(success, data, fail)
    }
    wx.request({
      url: baseUrl + url,
      data: data || '',
      header: {},
      method: 'DELETE',
      dataType: 'json',
      responseType: 'text',
      success(res) {
        if (success) {
          success(res);
        }
      },
      fail(res) {
        if (fail) {
          fail(res);
        }
      }
    })
  },
  put: (url, data, success, fail) => {
    if ((typeof data) == 'function') {
      if (success && (typeof success) == 'function') {
        fail = success;
      }
      success = data;
      data = '';
      console.log(success, data, fail)
    }
    wx.request({
      url: baseUrl + url,
      data: data || '',
      header: {},
      method: 'PUT',
      dataType: 'json',
      responseType: 'text',
      success(res) {
        if (success) {
          success(res);
        }
      },
      fail(res) {
        if (fail) {
          fail(res);
        }
      }
    })
  }
}


module.exports = {
  requestData: requestData
}

封装之后的使用

在js的代码示例

// 一定记得先引入
const {requestData} = require('../../utils/util');

requestData.get('你的请求URL', res => {
  if (res.statusCode == 200) {
    console.log(res)
    this.setData({
      hotList: res.data.body
    });
  } else {
    console.log(res.errMsg)
  }
}, err => {
  console.log(err)
})