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