超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

uni-app uni.request接口封裝

2020-4-9    seo達人

uni-app uni.request接口封裝

今天在做uni-app項目時,發(fā)現(xiàn)在uni-app中 調(diào)取后臺接口需要大量的重復(fù)編輯,就在想能不能封裝一個如同Vue項目中的this.$axios.get(url,data).then();格式,這樣就減少了很多代碼重復(fù)?。?br />
封裝為如同this.$axios.get(url,data).then();格式

第一步、

我們先在index首頁中的組件部分,創(chuàng)建一個js文件;





第二步、

我們在uni-app的入口文件中引入request.js文件;

在入口文件中掛載到uni-app實例上;





第三步、

開始接口封裝:

(以下為js文件代碼)



//先把接口暴露出去

export default{

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

request(options){

///我們使用Promise方法來實現(xiàn)調(diào)用接口時后面多個.then()的方法

//只有Promise能實現(xiàn)如同$axios后面連續(xù)多個.then()的方法

return new Promise((reslove,reject)=>{

uni.request({

...options,

success:res=>{

//判斷我們在使用封裝的自定義時第三個參數(shù)是否為native

//當native為true時 我們返回原數(shù)據(jù)

if(options.native){

reslove(res)

}

//當native為false時 我們直接返回data中的數(shù)據(jù)

if(res.statusCode === 200){

reslove(res.data)

}else{

//加入接口參數(shù)錯誤或接口地址錯誤時 我們返回原錯誤提示

reject(res)

}

}

})

})

},

//在方法中 第二個參數(shù)和第三個參數(shù)用ES6新語法來添加默認值

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

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

//我們把傳過來的參數(shù)賦給options,這樣我們在使用uni-app

//this.request()方法時 傳遞一個參數(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)封裝好的自定義事件啦



例一:

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



// 已封裝好的接口方法

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

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

//第二個參數(shù)沒有寫,默認為空;假如有參數(shù)的話 可以直接填寫

//后面的參數(shù)都為接口內(nèi)已經(jīng)定義好的默認值:{}空對象

//里面的res為接口返回數(shù)據(jù)中的data里面的內(nèi)容

this.$H.get('/api/getIndexCarousel.jsp').then(res=>{

//res打印出來是接口返回數(shù)據(jù)中data里面的數(shù)據(jù)

console.log(res)

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

this.swiperData = res

});



例二、



// 已封裝好的接口方法

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

//第一個為:接口地址

//第二個為:調(diào)取接口傳遞的參數(shù),方法使用時不用傳參,寫空對象就好

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

//若想返回原數(shù)據(jù),必須要填寫第二個參數(shù),若沒有參數(shù),也要寫空對象

//因為方法調(diào)用時 是按照傳參順序調(diào)用的,若不寫 參數(shù)傳遞就會出錯

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

native:true

}).then(res=>{

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

console.log(res)

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

this.swiperData = res

});




分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.miumiuwan.com

存檔