這些天團隊裏開始做小程序開發了,之前沒做過,都是第一次,第一次的感覺大家都懂的。週末看了一下小程序項目的代碼,在網絡請求上發現了一些小問題,最終沒忍住想了點辦法把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(); }, …… …… })
所有的東西大概就是這個樣子了,就這麼個意思,希望對大家有點用