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首頁(yè)中的組件部分，創(chuàng)建一個(gè)js文件；





第二步、

我們?cè)趗ni-app的入口文件中引入request.js文件；

在入口文件中掛載到uni-app實(shí)例上；





第三步、

開(kāi)始接口封裝：

（以下為js文件代碼）



//先把接口暴露出去

export default{

//我們先定一個(gè)uni-app方法 以便于以下操作使用uni-app調(diào)取接口時(shí)便利

request(options){

///我們使用Promise方法來(lái)實(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新語(yǔ)法來(lái)添加默認(rèn)值

//接口調(diào)取get方法

get(url,data={},options={}){

//我們把傳過(guò)來(lái)的參數(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)封裝完成啦，接下來(lái)就是 在頁(yè)面內(nèi)使用！

第四步、

我們可以在頁(yè)面中來(lái)調(diào)取已經(jīng)封裝好的自定義事件啦



例一：

個(gè)人建議使用ES6新語(yǔ)法 箭頭函數(shù) 不然使用this還要重新在外面聲明定義，太麻煩了，使用箭頭函數(shù)就會(huì)方便很多



// 已封裝好的接口方法

//本案例調(diào)取接口時(shí) 沒(méi)有參數(shù)上傳 直接調(diào)用的

//這樣使用方法時(shí)只傳遞了一個(gè)參數(shù)，也就是接口地址

//第二個(gè)參數(shù)沒(méi)有寫(xiě)，默認(rèn)為空；假如有參數(shù)的話 可以直接填寫(xiě)

//后面的參數(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打印出來(lái)是接口返回?cái)?shù)據(jù)中data里面的數(shù)據(jù)

console.log(res)

//賦給數(shù)據(jù)區(qū)的變量，方便本頁(yè)面使用

this.swiperData = res

});



例二、



// 已封裝好的接口方法

//本案例使用時(shí) 傳遞了三個(gè)參數(shù)

//第一個(gè)為：接口地址

//第二個(gè)為：調(diào)取接口傳遞的參數(shù)，方法使用時(shí)不用傳參，寫(xiě)空對(duì)象就好

//第三個(gè)為：自定義事件中 native 的屬性 若為true 則返回原數(shù)據(jù)

//若想返回原數(shù)據(jù)，必須要填寫(xiě)第二個(gè)參數(shù)，若沒(méi)有參數(shù)，也要寫(xiě)空對(duì)象

//因?yàn)榉椒ㄕ{(diào)用時(shí) 是按照傳參順序調(diào)用的，若不寫(xiě) 參數(shù)傳遞就會(huì)出錯(cuò)

this.$H.get('/api/getIndexCarousel.jsp',{},{

native:true

}).then(res=>{

//res打印出來(lái)的數(shù)據(jù)是接口返回來(lái)的原數(shù)據(jù)

console.log(res)

//賦給數(shù)據(jù)區(qū)的變量，方便本頁(yè)面使用

this.swiperData = res

});