建站
咨詢
售后
建站咨詢
新聞中心
這篇文章將為大家詳細講解有關(guān)微信小程序中wx.request如何實現(xiàn)封裝，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站建設(shè)、做網(wǎng)站與策劃設(shè)計,赫章網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:赫章等地區(qū)。赫章做網(wǎng)站價格咨詢:13518219792
看項目代碼時發(fā)現(xiàn)了下面幾點問題：
網(wǎng)絡(luò)請求都寫在Page里，每個請求都要重復的寫wx.request以及一些基礎(chǔ)配置；
每個頁面里都要處理相同類型的異常；
后端返的http status code為200以外時，并不能直接進入fail對應(yīng)函數(shù)進行處理；
針對這些問題，首先在項目目錄里新建了一個apis的目錄，把所有與API請求的東西都放在這個目錄里，如下圖這樣。
1. 新建一個request類，對wx.request進行簡單封裝 在request類里做了以下幾件事:
在構(gòu)造函數(shù)里創(chuàng)建默認請求的http header，可以在header里配制一些內(nèi)容，在對應(yīng)請求方法中如果沒有設(shè)置header參數(shù)，就使用此默認header參數(shù)；
以get post delete put等方法對request進行封裝，在發(fā)起網(wǎng)絡(luò)請求不需要重復的寫wx.request({method:xxx})這些代碼，只要調(diào)用getRequest、postRequest等方法就可以了；
在rquest的結(jié)果返回處理函數(shù)success中，判定服務(wù)端返回的狀態(tài)代碼，對于200狀態(tài)代碼的按業(yè)務(wù)處理成功處理，對于非200的狀態(tài)碼按異常處理。
預留統(tǒng)一異常處理函數(shù)處理接口，可以通過setErrorHandler來設(shè)置統(tǒng)一的異常處理，這樣對于一些可以統(tǒng)一處理的異常就不用在業(yè)務(wù)頁面里去重復處理了，例如后端返回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ò)請求
*/
getRequest(url, data, header = this._header) {
return this.requestAll(url, data, header, 'GET')
}
/**
* DELETE類型的網(wǎng)絡(luò)請求
*/
deleteRequest(url, data, header = this._header) {
return this.requestAll(url, data, header, 'DELETE')
}
/**
* PUT類型的網(wǎng)絡(luò)請求
*/
putRequest(url, data, header = this._header) {
return this.requestAll(url, data, header, 'PUT')
}
/**
* POST類型的網(wǎng)絡(luò)請求
*/
postRequest(url, data, header = this._header) {
return this.requestAll(url, data, header, 'POST')
}
/**
* 網(wǎng)絡(luò)請求
*/
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 {
//其它錯誤，提示用戶錯誤信息
if (this._errorHandler != null) {
//如果有統(tǒng)一的異常處理，就先調(diào)用統(tǒng)一異常處理函數(shù)對異常進行處理
this._errorHandler(res)
}
reject(res)
}
}),
fail: (res => {
if (this._errorHandler != null) {
this._errorHandler(res)
}
reject(res)
})
})
})
}
}
export default request2. 新建一個agriknow類 在agriknow里面做了以下幾件事：
實現(xiàn)所有業(yè)務(wù)服務(wù)調(diào)用，如查詢所有新聞列表【getNews】，查詢所有課程列表【getCourseList】；
實現(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 () {
// 展示本地存儲能力
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里調(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: '出錯了！',
icon: 'none'
})
})
},
//下拉刷新
onPullDownRefresh() {
console.log("下拉刷新");
this.getdataList();
},
……
……
})關(guān)于“微信小程序中wx.request如何實現(xiàn)封裝”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
文章名稱：微信小程序中wx.request如何實現(xiàn)封裝
當前網(wǎng)址：http://www.dlmjj.cn/article/jdgogd.html
