在上一篇文章里面二庵，寫到使用uni.request請(qǐng)求的方法
http://www.reibang.com/p/bc62c9e1beed
getList() {
uni.request({
url: "https://unidemo.dcloud.net.cn/api/news",
method: 'get',
dataType: 'json',
success: (res) => {
console.log(res.data);
this.productList = res.data;
},
});
},
但是實(shí)際做項(xiàng)目的時(shí)候亲茅，會(huì)發(fā)現(xiàn)每個(gè)界面都要重復(fù)的寫這些譬挚，看起來(lái)重復(fù)又啰嗦，心情就十分的不美麗了攻锰。
如果不封裝那么我們會(huì)面臨幾個(gè)不方便的地方：
請(qǐng)求頭每次網(wǎng)絡(luò)請(qǐng)求都要單獨(dú)設(shè)置
返回?cái)?shù)據(jù)的正確性判斷每次都要重復(fù)大量代碼
返回?cái)?shù)據(jù)格式有變化需要修改所有網(wǎng)絡(luò)請(qǐng)求的地方
那么揩魂，該怎么使用uni-app封裝一個(gè)request請(qǐng)求？步驟很簡(jiǎn)單拐揭，且聽我一一道來(lái)撤蟆。
注意：使用的例子，來(lái)自于這篇文章的相關(guān)的代碼堂污，修改封裝請(qǐng)求是基于這個(gè)文章里面代碼家肯。進(jìn)行相關(guān)的修改的。
http://www.reibang.com/p/bc62c9e1beed
步驟如下：
1盟猖、項(xiàng)目下新建common文件夾讨衣，再創(chuàng)建request.js文件
2、打開request.js文件式镐，開始寫封裝的代碼
思路很簡(jiǎn)單
定義域名：baseUrl反镇；
定義方法：api；
通過(guò)promise異步請(qǐng)求娘汞，最后導(dǎo)出方法歹茶。
request.js參考代碼如下
const baseUrl = 'https://unidemo.dcloud.net.cn'
const request = (url = '', date = {}, type = 'GET', header = {
}) => {
return new Promise((resolve, reject) => {
uni.request({
method: type,
url: baseUrl + url,
data: date,
header: header,
dataType: 'json',
}).then((response) => {
setTimeout(function() {
uni.hideLoading();
}, 200);
let [error, res] = response;
resolve(res.data);
}).catch(error => {
let [err, res] = error;
reject(err)
})
});
}
export default request
3、在main.js全局注冊(cè)
import request from 'common/request.js'
Vue.prototype.$request = request
4你弦、頁(yè)面調(diào)用
this.$request('/api/news', {
// 傳參參數(shù)名：參數(shù)值,如果沒有惊豺，就不需要傳
}).then(res => {
// 打印調(diào)用成功回調(diào)
console.log(res)
})
頁(yè)面調(diào)用的index.vue
<template>
<view>
<uni-list v-for="(item,index) in productList" :key="index">
<uni-list-item :title="item.author_name" :note="item.title"></uni-list-item>
</uni-list>
</view>
</template>
<script>
import uniList from "@/components/uni-list/uni-list.vue"
import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
export default {
components: {
uniList,
uniListItem
},
data() {
return {
productList: [],
};
},
onLoad() {
this.getList();
},
methods: {
getList() {
this.$request('/api/news', {
// 傳參參數(shù)名：參數(shù)值,如果沒有，就不需要傳
// "username": "john",
// "key": this.searchValue
}).then(res => {
// 打印調(diào)用成功回調(diào)
console.log(res)
this.productList = res;
})
},
}
}
</script>
<style>
</style>
成功顯示
好了禽作，完結(jié)扮叨，散花，準(zhǔn)備睡覺Ａ炻酢彻磁！
各位路過(guò)的小哥哥碍沐，小姐姐，喜歡的就點(diǎn)個(gè)贊唄衷蜓。
歡迎關(guān)注【編程微刊】公眾號(hào)累提，回復(fù)【領(lǐng)取資源】,500G編程學(xué)習(xí)資源干貨免費(fèi)送。
