這篇文章將為大家詳細(xì)講解有關(guān)微信小程序中wx.request如何實(shí)現(xiàn)封裝，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站建設(shè)、做網(wǎng)站與策劃設(shè)計(jì),赫章網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:赫章等地區(qū)。赫章做網(wǎng)站價(jià)格咨詢:13518219792

看項(xiàng)目代碼時(shí)發(fā)現(xiàn)了下面幾點(diǎn)問題：

• 網(wǎng)絡(luò)請(qǐng)求都寫在Page里，每個(gè)請(qǐng)求都要重復(fù)的寫wx.request以及一些基礎(chǔ)配置；

• 每個(gè)頁面里都要處理相同類型的異常；

• 后端返的http status code為200以外時(shí)，并不能直接進(jìn)入fail對(duì)應(yīng)函數(shù)進(jìn)行處理；

針對(duì)這些問題，首先在項(xiàng)目目錄里新建了一個(gè)apis的目錄，把所有與API請(qǐng)求的東西都放在這個(gè)目錄里，如下圖這樣。

1. 新建一個(gè)request類，對(duì)wx.request進(jìn)行簡單封裝 在request類里做了以下幾件事:

• 在構(gòu)造函數(shù)里創(chuàng)建默認(rèn)請(qǐng)求的http header，可以在header里配制一些內(nèi)容，在對(duì)應(yīng)請(qǐng)求方法中如果沒有設(shè)置header參數(shù)，就使用此默認(rèn)header參數(shù)；

• 以get post delete put等方法對(duì)request進(jìn)行封裝，在發(fā)起網(wǎng)絡(luò)請(qǐng)求不需要重復(fù)的寫wx.request({method:xxx})這些代碼，只要調(diào)用getRequest、postRequest等方法就可以了；

• 在rquest的結(jié)果返回處理函數(shù)success中，判定服務(wù)端返回的狀態(tài)代碼，對(duì)于200狀態(tài)代碼的按業(yè)務(wù)處理成功處理，對(duì)于非200的狀態(tài)碼按異常處理。

• 預(yù)留統(tǒng)一異常處理函數(shù)處理接口，可以通過setErrorHandler來設(shè)置統(tǒng)一的異常處理，這樣對(duì)于一些可以統(tǒng)一處理的異常就不用在業(yè)務(wù)頁面里去重復(fù)處理了，例如后端返回401的代碼，就可以統(tǒng)一轉(zhuǎn)到登錄頁面讓用戶登錄了；

• 此request不限定服務(wù)提供都，可以是自己開發(fā)的業(yè)務(wù)服務(wù)端，也可以用于第三方服務(wù)的調(diào)用；

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

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

 /**
  * GET類型的網(wǎng)絡(luò)請(qǐng)求
  */
 getRequest(url, data, header = this._header) {
  return this.requestAll(url, data, header, 'GET')
 }

 /**
  * DELETE類型的網(wǎng)絡(luò)請(qǐng)求
  */
 deleteRequest(url, data, header = this._header) {
  return this.requestAll(url, data, header, 'DELETE')
 }

 /**
  * PUT類型的網(wǎng)絡(luò)請(qǐng)求
  */
 putRequest(url, data, header = this._header) {
  return this.requestAll(url, data, header, 'PUT')
 }

 /**
  * POST類型的網(wǎng)絡(luò)請(qǐng)求
  */
 postRequest(url, data, header = this._header) {
  return this.requestAll(url, data, header, 'POST')
 }

 /**
  * 網(wǎng)絡(luò)請(qǐng)求
  */
 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: 服務(wù)端業(yè)務(wù)處理正常結(jié)束
      resolve(res)
     } else {
      //其它錯(cuò)誤，提示用戶錯(cuò)誤信息
      if (this._errorHandler != null) {
      //如果有統(tǒng)一的異常處理，就先調(diào)用統(tǒng)一異常處理函數(shù)對(duì)異常進(jìn)行處理
       this._errorHandler(res)
      }
      reject(res)
     }
    }),
    fail: (res => {
     if (this._errorHandler != null) {
      this._errorHandler(res)
     }
     reject(res)
    })
   })
  })
 }
}

export default request

2. 新建一個(gè)agriknow類 在agriknow里面做了以下幾件事：

• 實(shí)現(xiàn)所有業(yè)務(wù)服務(wù)調(diào)用，如查詢所有新聞列表【getNews】，查詢所有課程列表【getCourseList】；

• 實(shí)現(xiàn)統(tǒng)一的異常處理，并傳給request；

• 將服務(wù)端返回的結(jié)果response轉(zhuǎn)成response.data回傳給API調(diào)用的地方；

/**
 * name: agriknow.js
 * description: 農(nóng)知匯服務(wù)器提供的服務(wù)
 * 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)
 }

 /**
  * 統(tǒng)一的異常處理方法
  */
 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. 函數(shù)的調(diào)用

在app中引用argriknow

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

定義一個(gè)類型為agriknow的屬性并實(shí)例化

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

在Page里調(diào)用

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: '出錯(cuò)了！',
     icon: 'none'
    })
   })
 },
 //下拉刷新
 onPullDownRefresh() {
  console.log("下拉刷新");
  this.getdataList();
 },
 ……
 ……
})

關(guān)于“微信小程序中wx.request如何實(shí)現(xiàn)封裝”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。