微信小程序wx.request的簡單封裝

這些天團隊裏開始作小程序開發了，以前沒作過，都是第一次，第一次的感受你們都懂的。週末看了一下小程序項目的代碼，在網絡請求上發現了一些小問題，最終沒忍住想了點辦法把request封裝了一下。下面來看看吧。

看項目代碼時發現了下面幾點問題：

• 網絡請求都寫在Page裏，每一個請求都要重複的寫wx.request以及一些基礎配置；
• 每一個頁面裏都要處理相同類型的異常；
• 後端返的http status code爲200之外時，並不能直接進入fail對應函數進行處理；

針對這些問題，首先在項目目錄裏新建了一個apis的目錄，把全部與API請求的東西都放在這個目錄裏，以下圖這樣。

1. 新建一個request類，對wx.request進行簡單封裝 在request類裏作了如下幾件事:

• 在構造函數裏建立默認請求的http header，能夠在header裏配製一些內容，在對應請求方法中若是沒有設置header參數，就使用此默認header參數；
• 以get post delete put等方法對request進行封裝，在發起網絡請求不須要重複的寫wx.request({method:xxx})這些代碼，只要調用getRequest、postRequest等方法就能夠了；
• 在rquest的結果返回處理函數success中，斷定服務端返回的狀態代碼，對於200狀態代碼的按業務處理成功處理，對於非200的狀態碼按異常處理。
• 預留統一異常處理函數處理接口，能夠經過setErrorHandler來設置統一的異常處理，這樣對於一些能夠統一處理的異常就不用在業務頁面裏去重複處理了，例如後端返回401的代碼，就能夠統一轉到登陸頁面讓用戶登陸了；
• 此request不限定服務提供都，能夠是本身開發的業務服務端，也能夠用於第三方服務的調用；

/**
 * name: api.js
 * description: request處理基礎類
 * author: 徐磊
 * date: 2018-5-19
 */
class request {
  constructor() {
    this._header = {}
  }

/**
 * 設置統一的異常處理
 */
  setErrorHandler(handler) {
    this._errorHandler = handler;
  }

  /**
   * GET類型的網絡請求
   */
  getRequest(url, data, header = this._header) {
    return this.requestAll(url, data, header, 'GET')
  }

  /**
   * DELETE類型的網絡請求
   */
  deleteRequest(url, data, header = this._header) {
    return this.requestAll(url, data, header, 'DELETE')
  }

  /**
   * PUT類型的網絡請求
   */
  putRequest(url, data, header = this._header) {
    return this.requestAll(url, data, header, 'PUT')
  }

  /**
   * 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: 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
複製代碼

2. 新建一個agriknow類 在agriknow裏面作了如下幾件事：

• 實現全部業務服務調用，如查詢全部新聞列表【getNews】，查詢全部課程列表【getCourseList】；
• 實現統一的異常處理，並傳給request；
• 將服務端返回的結果response轉成response.data回傳給API調用的地方；

/**
 * name: agriknow.js
 * description: 農知匯服務器提供的服務
 * author: 徐磊
 * date: 2018-5-19
 */
import request from './request.js'
class agriknow {
  constructor() {
    this._baseUrl = 'https://apis.xxx.xxx.com/dev/apis/train/v1/'
    this._defaultHeader = { 'data-tupe': 'application/json' }
    this._request = new request
    this._request.setErrorHandler(this.errorHander)
  }

  /**
   * 統一的異常處理方法
   */
  errorHander(res) {
    console.error(res)
  }

  /**
   * 查詢全部新聞列表
   */
  getNews(page = 1, size = 10) {
    let data = { page: page, size: size }
    return this._request.getRequest(this._baseUrl + 'news/client', data).then(res => res.data)
  }

  /**
   * 獲取全部課程
   */
  getCourseList(page = 1, size = 10, key = null) {
    let data = key != null ? { page: page, size: size, queryValue: key } : { page: page, size: size }
    return this._request.getRequest(this._baseUrl + '/course/mobile', data).then(res => res.data)
  }
}
export default agriknow
複製代碼

3. 函數的調用

• 在app中引用argriknow

  import agriknow from './apis/agriknow.js'
  App({
    onLaunch: function () {
      // 展現本地存儲能力
      var logs = wx.getStorageSync('logs') || []
      logs.unshift(Date.now())
      wx.setStorageSync('logs', logs)
  ……
  ……
  複製代碼

• 定義一個類型爲agriknow的屬性並實例化

  import agriknow from './apis/agriknow.js'
  App({
    onLaunch: function () {
      // 展現本地存儲能力
      var logs = wx.getStorageSync('logs') || []
      logs.unshift(Date.now())
      wx.setStorageSync('logs', logs)
  ……
  ……
    },
    agriknow:new agriknow()
  })
  複製代碼

• 在Page裏調用

  const app = getApp();
  Page({
    data: {
      courseData: [],
      page: 1,
      size: 10,
      total: 0
    },
    onLoad: function () {
    ……
    ……
      wx.startPullDownRefresh()
      this.getdataList();
    },
    //查詢課程列表
    getdataList() {
      app.agriknow.getCourseList(this.data.page++, this.data.size, '')
        .then(res => {
          wx.stopPullDownRefresh()
          let list = this.data.page > 2 ? this.data.courseData.concat(res.list) : res.list
          this.setData({
            courseData: list
          })
        })
        .catch(res => {
          wx.stopPullDownRefresh()
          wx.showToast({
            title: '出錯了！',
            icon: 'none'
          })
        })
    },
    //下拉刷新
    onPullDownRefresh() {
      console.log("下拉刷新");
      this.getdataList();
    },
    ……
    ……
  })
  複製代碼

全部的東西大概就是這個樣子了，就這麼個意思，但願對你們有點用。