微信小程序中wx.request如何實現封裝

這篇文章將為大家詳細講解有關微信小程序中wx.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();
 },
 ……
 ……
})

關于“微信小程序中wx.request如何實現封裝”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。