2020-4-9 seo達(dá)人
uni-app uni.request接口封裝
今天在做uni-app項(xiàng)目時(shí)，發(fā)現(xiàn)在uni-app中 調(diào)取后臺(tái)接口需要大量的重復(fù)編輯，就在想能不能封裝一個(gè)如同Vue項(xiàng)目中的this.$axios.get(url,data).then();格式，這樣就減少了很多代碼重復(fù)！！
封裝為如同this.$axios.get(url,data).then();格式
第一步、
我們先在index首頁中的組件部分，創(chuàng)建一個(gè)js文件；
第二步、
我們?cè)趗ni-app的入口文件中引入request.js文件；
在入口文件中掛載到uni-app實(shí)例上；
第三步、
開始接口封裝：
（以下為js文件代碼）
//先把接口暴露出去
export default{
//我們先定一個(gè)uni-app方法 以便于以下操作使用uni-app調(diào)取接口時(shí)便利
request(options){
///我們使用Promise方法來實(shí)現(xiàn)調(diào)用接口時(shí)后面多個(gè).then()的方法
//只有Promise能實(shí)現(xiàn)如同$axios后面連續(xù)多個(gè).then()的方法
return new Promise((reslove,reject)=>{
uni.request({
...options,
success:res=>{
//判斷我們?cè)谑褂梅庋b的自定義時(shí)第三個(gè)參數(shù)是否為native
//當(dāng)native為true時(shí) 我們返回原數(shù)據(jù)
if(options.native){
reslove(res)
}
//當(dāng)native為false時(shí) 我們直接返回data中的數(shù)據(jù)
if(res.statusCode === 200){
reslove(res.data)
}else{
//加入接口參數(shù)錯(cuò)誤或接口地址錯(cuò)誤時(shí) 我們返回原錯(cuò)誤提示
reject(res)
}
}
})
})
},
//在方法中 第二個(gè)參數(shù)和第三個(gè)參數(shù)用ES6新語法來添加默認(rèn)值
//接口調(diào)取get方法
get(url,data={},options={}){
//我們把傳過來的參數(shù)賦給options，這樣我們?cè)谑褂胾ni-app
//this.request()方法時(shí) 傳遞一個(gè)參數(shù)就可以
options.url = url;
options.data = data;
options.method = 'get';
//調(diào)用上面自己定義的this.request()方法傳遞參數(shù)
return this.request(options)
},
//接口調(diào)取post方法
post(url,data={},options={}){
options.url = url;
options.data = data;
options.method = 'post';
return this.request(options)
}
}
這樣我們就已經(jīng)封裝完成啦，接下來就是 在頁面內(nèi)使用！
第四步、
我們可以在頁面中來調(diào)取已經(jīng)封裝好的自定義事件啦
例一：
個(gè)人建議使用ES6新語法 箭頭函數(shù) 不然使用this還要重新在外面聲明定義，太麻煩了，使用箭頭函數(shù)就會(huì)方便很多
// 已封裝好的接口方法
//本案例調(diào)取接口時(shí) 沒有參數(shù)上傳 直接調(diào)用的
//這樣使用方法時(shí)只傳遞了一個(gè)參數(shù)，也就是接口地址
//第二個(gè)參數(shù)沒有寫，默認(rèn)為空；假如有參數(shù)的話 可以直接填寫
//后面的參數(shù)都為接口內(nèi)已經(jīng)定義好的默認(rèn)值：{}空對(duì)象
//里面的res為接口返回?cái)?shù)據(jù)中的data里面的內(nèi)容
this.$H.get('/api/getIndexCarousel.jsp').then(res=>{
//res打印出來是接口返回?cái)?shù)據(jù)中data里面的數(shù)據(jù)
console.log(res)
//賦給數(shù)據(jù)區(qū)的變量，方便本頁面使用
this.swiperData = res
});
例二、
// 已封裝好的接口方法
//本案例使用時(shí) 傳遞了三個(gè)參數(shù)
//第一個(gè)為：接口地址
//第二個(gè)為：調(diào)取接口傳遞的參數(shù)，方法使用時(shí)不用傳參，寫空對(duì)象就好
//第三個(gè)為：自定義事件中 native 的屬性 若為true 則返回原數(shù)據(jù)
//若想返回原數(shù)據(jù)，必須要填寫第二個(gè)參數(shù)，若沒有參數(shù)，也要寫空對(duì)象
//因?yàn)榉椒ㄕ{(diào)用時(shí) 是按照傳參順序調(diào)用的，若不寫 參數(shù)傳遞就會(huì)出錯(cuò)
this.$H.get('/api/getIndexCarousel.jsp',{},{
native:true
}).then(res=>{
//res打印出來的數(shù)據(jù)是接口返回來的原數(shù)據(jù)
console.log(res)
//賦給數(shù)據(jù)區(qū)的變量，方便本頁面使用
this.swiperData = res
});
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.lapeinture.cn