小程序网络请求封装

首先是统一的网络请求和异常处理

class request {
  constructor() {
    this._header = {}
  }

  /**
   * 设置统一的异常处理
   */
  setErrorHandler(handler) {
    this._errorHandler = handler;
  }

  /**
   * GET类型的网络请求
   */
  getRequest(url, data, header = this._header) {
    return this.requestAll(url, data, header, 'GET')
  }

  /**
   * POST类型的网络请求
   */
  postRequest(url, data, header = this._header) {
    return this.requestAll(url, data, header, 'POST')
  }

  /**
   * 网络请求
   */
  requestAll(url, data, header, method) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: url,
        data: JSON.stringify(data),
        header: header,
        method: method,
        success: (res => {
          if (res.statusCode === 200) {
            //200: 服务端业务处理正常结束
            resolve(res)
          } else {
            //其它错误，提示用户错误信息
            if (this._errorHandler != null) {
              //如果有统一的异常处理，就先调用统一异常处理函数对异常进行处理
              this._errorHandler(res)
            }
            reject(res)
          }
        }),
        fail: (res => {
          if (this._errorHandler != null) {
            this._errorHandler(res)
          }
          reject(res)
        })
      })
    })
  }
}

export default request

其次新建配置js文件，引用上面的代码

import request from './request.js'
class agriknow {
  constructor() {
    this._baseUrl = 'https://xxxx/xxxxx/'
    this._defaultHeader = { 'content-type': 'application/json; charset=utf-8'}
    this._request = new request
    this._request.setErrorHandler(this.errorHander)
  }

  /**
   * 统一的异常处理方法
   */
  errorHander(res) {
    console.error(res)
  }
}
export default agriknow

接下来具体在某个页面js里的网络请求

  //获取页面数据
  getData: function() {
    let that = this
    let data = {
      page: that.data.page,
      size: that.data.size,
      orderState: 0
    }
    Object.assign(base._defaultHeader, {
      'token': app.globalData.userInfo
    })
    base._request.postRequest(base._baseUrl + 'yyyyyyyy', data, base._defaultHeader).then(res => {
        console.log(res.data)
        that.setData({
            applyList: res.data.data.content
        })
      })
      .catch(res => {
        wx.stopPullDownRefresh()
        wx.showToast({
          title: '出错了！',
          icon: 'none'
        })
      })
  },