不管是在小程序還是咋們的java編程中电谣，往往為了提高代碼的高復(fù)用性贷揽，我們都會(huì)對(duì)經(jīng)常重復(fù)使用到的代碼塊進(jìn)行一定的封裝美澳，進(jìn)而加快開發(fā)竞阐，當(dāng)然有時(shí)候還可以降低對(duì)內(nèi)存的使用（抑或者說降低對(duì)服務(wù)器的負(fù)載）。今天我將之前在小程序用到的request封裝的代碼留給各位老鐵參考使用哈硫椰，喜歡可以關(guān)注我哈繁调，沒錯(cuò)我就是會(huì)一些前端的后端程序員，Kacen靶草！
廢話不多說蹄胰，直接干起兒！
1.首先我們?cè)诟夸浵罗认瑁陆ㄒ粋€(gè)request文件夾裕寨，專門放一些用來做請(qǐng)求使用的js，圖片是事例：
![]()
meishenme.png
meishenme.png
2.我們新建一個(gè)allrequest.js文件來把你想封裝的代碼放進(jìn)去(這里我寫的是get,post,put,delete)
class request{
constructor(){
this._header = {}
}
// 統(tǒng)一異常處理
setErrorHandler(handler){
this._errorHandler = handler;
}
// GET請(qǐng)求處理
getRequest(url, data, header = this._header){
return this.requestAll(url, data, header, 'GET')
}
// POST請(qǐng)求處理
postRequest(url, data, header = this._header){
return this.requestAll(url, data, header, 'POST')
}
// PUT請(qǐng)求處理
putRequest(url, data, header = this._header){
return this.requestAll(url, data, header, 'PUT')
}
// DELETE請(qǐng)求處理
deleteRequest(url, data, header = this._header){
return this.requestAll(url, data, header, 'DELETE')
}
requestAll(url, data, header, requestMethod){
return new Promise((resolve, reject) => {
wx.request({
url: url,
data: data,
header: header,
method: requestMethod,
fail: (res) => {
//這里是將錯(cuò)誤的信息統(tǒng)一處理,因?yàn)槲覀儠?huì)寫一個(gè)統(tǒng)一處理錯(cuò)誤的代碼派继，我們可以在每個(gè)不同的js下定義不同的錯(cuò)誤信息宾袜。
if(this._errorHandler != null){
this._errorHandler(res)
}
reject(res)
},
success: (result) => {
if (result.statusCode === 200)
resolve(result)
else{
if(this._errorHandler != null){
this._errorHandler(result)
}
}
reject(result)
},
})
})
}
}
export default request
3.每個(gè)頁(yè)面不同會(huì)有不同的需求，所以我們可以新建一個(gè)專門的js來針對(duì)你想請(qǐng)求的頁(yè)面(這里以indexTest為例子)
import request from "./allrequest.js"
import config from "../config.js"
class indexTest{
constructor() {
this._baseUrl = config.localAddress+config.wechatIndex.swiper
this._defaultHeader = {
"access-token":config.accessToken,
"version":config.version,
"user-token":config.userToken,
'content-type': 'application/json'
}
this._request = new request
this._request.setErrorHandler(this.errorHander)
}
/**
* 統(tǒng)一的異常處理方法
*/
errorHander(res) {
console.error(res)
}
//獲取首頁(yè)swiper圖片
getSwiperImage(){
let data = {}
const path = config.wechatIndex.swiperImages;
return this._request.postRequest(this._baseUrl+path,data,this._defaultHeader).then(res => res.data)
}
}
export default indexTest
注意：
如果需要在小程序全局調(diào)用驾窟，那么我們就需要在app.js下添加兩行代碼庆猫，先引入后初始化，截圖給你們看哈
image.png
image.png
4.這里我是以全局調(diào)用為主哦绅络，所以是直接app.indexTest.getSwiperImage()
onLoad: function (options) {
this.testRequest();
},
testRequest(){
app.indexTest.getSwiperImage()
.then(res => {
if(res.getData != undefined)
{
this.setData({
topSwiperList: res.getData
})
}else{
console.log("沒有圖片");
}
}).catch(res => {
wx.showToast({
title: '出錯(cuò)了月培！',
icon: 'none'
})
})
}
以上就是對(duì)request的封裝啦嘁字，小伙伴可以直接嘗試一下哈，代碼都是可以復(fù)制粘貼使用的三無產(chǎn)品杉畜，無害纪蜒，無毒，無收費(fèi)４说纯续！
