好記性不如爛筆頭
網(wǎng)絡(luò)請求是小程序中必不可少的一部分，而且使用頻率也很高吧秕，雖然小程序提供的網(wǎng)絡(luò)請求組件已經(jīng)封裝的很方便琉闪，但還是有必要根據(jù)業(yè)務(wù)具體封裝一下，還是那一句話：不輕視任何一個知識點砸彬！
一颠毙、 響應(yīng)式
1. 封裝
① 創(chuàng)建
http.js文件， 定義HTTP類
② 定義公用請求方法
③ 導(dǎo)出當(dāng)前類
http.js文件砂碉，這是我根據(jù)我后臺的邏輯封裝的響應(yīng)式HTTP請求工具
我后臺的規(guī)則是000000代表請求成功蛀蜜，000005代表token失效需要重新登錄
class HTTP {
request(params) {
if (!params.method) {
params.method = 'GET'
}
wx.request({
url: '主網(wǎng)址' + params.url,
method: params.method,
data: params.data,
header: {
'content-type': 'application/json'
},
success: (res) => {
let code = res.data.resp_code.toString()
if (code == '000000') {
params.success && params.success(res.data)
}else if (code == '000005') {
this. _showToast('token失效，請重新登錄')
}else {
let msg = res.data.resp_message
this._showToast(msg)
}
},
fail: (err) => {
this._showToast('請求出錯增蹭，請稍后重試')
}
})
}
_showToast(title) {
wx.showToast({
title: title,
icon: 'none',
duration: 2000
})
}
}
export {HTTP}
2. 調(diào)用
① 引入封裝好的HTTP工具類
② 聲明HTTP
③ 請求數(shù)據(jù)
import {
HTTP
} from '../util/http.js'
const http = new HTTP()
// GET
http.request({
url: '',
success: (res) => {
// res 后臺返回的數(shù)據(jù)
}
})
//POST
http.request({
url: '',
method: 'POST',
data: {
art_id: '',
type: ''
},
success: (res) => {
// res 后臺返回的數(shù)據(jù)
}
})
3. 再封裝
可以根據(jù)具體的業(yè)務(wù)邏輯對HTTP工具進行再一次的封裝滴某，簡化請求的調(diào)用，使得業(yè)務(wù)邏輯更加的清晰滋迈。比如我要獲取圖書信息霎奢，以下是bookModel.js文件代碼，所有和圖書相關(guān)的請求方法都可以封裝在這個文件中
①創(chuàng)建
js文件饼灿，比如bookModel.js幕侠，并引入HTTP
②定義類，比如BookModel碍彭，并繼承定義的HTTP類晤硕，方便調(diào)用HTTP請求方法
③獲取對應(yīng)數(shù)據(jù)悼潭，并回調(diào)出去
④導(dǎo)出當(dāng)前類
import {
HTTP
} from '../util/http.js'
class BookModel extends HTTP {
// 獲取圖書信息
getBookInfo(sCallback) {
this.request({
url: '',
method: 'POST',
data: {
id: '',
type: ''
},
success: (res) => {
sCallback(res)
}
})
}
}
export { BookModel }
調(diào)用的時候只需要引入
BookModel并聲明，直接調(diào)用getBookInfo即可
import {
BookModel
} from '../../models/bookModel.js'
let bookModel = new BookModel()
// 獲取圖書信息
bookModel.getBookInfo((res) => {
// res 獲取到的數(shù)據(jù)
})
二窗骑、Promise鏈?zhǔn)?/h3>
Promise是以另一種方式封裝HTTP請求女责，這種方式可以很好的解決回調(diào)地獄問題，即請求回調(diào)嵌套請求的問題创译，廢話不多說抵知，直接上代碼
1. 封裝
http-p.js文件
class HTTP {
request({url, data = {}, method = 'GET'}) {
return new Promise((resolve, reject) => {
this._request(url, resolve, reject, data, method)
})
}
_request(url, resolve, reject, data, method) {
wx.request({
url: '主網(wǎng)址' +url,
method: method,
data: data,
header: {
'content-type': 'application/json'
},
success: (res) => {
let code = res.data.resp_code.toString()
if (code == '000000') {
resolve(res.data)
}else if (code == '000005') {
reject()
this. _showToast('token失效，請重新登錄')
}else {
reject()
let msg = res.data.resp_message
this._showToast(msg)
}
},
fail: (err) => {
reject()
this._showToast('請求出錯软族，請稍后重試')
}
})
}
_showToast(title) {
wx.showToast({
title: title,
icon: 'none',
duration: 2000
})
}
}
export { HTTP }
2. 再封裝
bookModel.js文件代碼
import {
HTTP
} from '../util/http-p.js'
class BookModel extends HTTP {
// 獲取圖書信息1
getBookInfo1() {
return this.request({
url: '',
method: 'POST',
data: {
id: ''
}
})
}
// 獲取圖書信息2
getBookInfo2() {
return this.request({
url: '',
method: 'POST',
data: {
id: ''
}
})
}
}
export { BookModel }
3.調(diào)用
import {
BookModel
} from '../../models/bookModel.js'
let bookModel = new BookModel()
// 獲取圖書信息1
const info1 = bookModel.getBookInfo1()
const info2 = bookModel.getBookInfo2()
info1.then(res => {
// res 獲取到的圖書信息1的數(shù)據(jù)
})
info2.then(res => {
// res 獲取到的圖書信息2的數(shù)據(jù)
})
// 獲取圖書信息1后獲取圖書信息2
Promise.all([info1, info2]).then(res => {
// res[0] 圖書信息1的數(shù)據(jù)
// res[1] 圖書信息2的數(shù)據(jù)
})
