微信小程序wx.request的簡(jiǎn)單封裝

更新時(shí)間：2019年11月13日 15:54:18 作者：徐磊x

這篇文章主要介紹了微信小程序wx.request的簡(jiǎn)單封裝，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

這些天團(tuán)隊(duì)里開始做小程序開發(fā)了，之前沒做過，都是第一次，第一次的感覺大家都懂的。周末看了一下小程序項(xiàng)目的代碼，在網(wǎng)絡(luò)請(qǐng)求上發(fā)現(xiàn)了一些小問題，最終沒忍住想了點(diǎn)辦法把request封裝了一下。下面來看看吧。

看項(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)行簡(jiǎ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();
 },
 ……
 ……
})

所有的東西大概就是這個(gè)樣子了，就這么個(gè)意思，希望對(duì)大家有點(diǎn)用。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: