vue中promise的使用及異步請(qǐng)求數(shù)據(jù)的方法
下面給大家介紹vue中promise的使用
promise是處理異步的利器，在之前的文章《ES6之promise》中，我詳細(xì)介紹了promise的使用， 在文章《js動(dòng)畫實(shí)現(xiàn)&&回調(diào)地獄&&promise》中也提到了promise的then的鏈?zhǔn)秸{(diào)用， 這篇文章主要是介紹在實(shí)際項(xiàng)目中關(guān)于異步我遇到的一些問題以及解決方法，由此來加深對(duì)promise的進(jìn)一步理解。
背景
進(jìn)入商品頁，商品頁的左側(cè)是分類，右側(cè)是具體的商品，一旦進(jìn)入商品頁，就把所有分類的商品請(qǐng)求出來，注意： 必須要按照順序。
實(shí)現(xiàn)思路
在商品頁, created 鉤子函數(shù)觸發(fā)獲取分類的http請(qǐng)求，請(qǐng)求到結(jié)果后，開始請(qǐng)求所有的具體商品并渲染。
遇到的問題
•由于請(qǐng)求商品分類是異步的， 怎么判斷異步請(qǐng)求完成， 也就是說請(qǐng)求具體商品的時(shí)機(jī)是什么時(shí)候。
•獲取到所有的商品必須發(fā)送請(qǐng)求，請(qǐng)求時(shí)異步的，怎么保證能夠按照順序獲取到。
解決問題 --- 問題一
針對(duì)問題一，最好的方式還是使用promise，大致實(shí)現(xiàn)如下：
getClassify: function () {
var that = this;
// 使用promise處理異步。
this.updateKinds().then(function () {
console.log("獲取分類結(jié)束！");
that.updateAllContent();
});
},
其中g(shù)etClassify是在created時(shí)就會(huì)調(diào)用的，而updateKinds是actions中的方法，我們先看看actions中是怎么寫的：
updateKinds ({commit, state}) {
return new Promise(function (resolve, reject) {
axios.get('/bbg/shop/get_classify', {
params: {
sid: 13729792
}
})
.then(function (response) {
if (response.data.code == 130) {
commit(UPDATE_KINDS, response.data.data)
console.log(response.data.data);
resolve()
}
}).catch(function (error) {
console.log(error);
});
});
即返回一個(gè)promise，當(dāng)請(qǐng)求到數(shù)據(jù)，并且commit之后，我們就額可以resolve()了，這樣，就可以在then中執(zhí)行獲取所有內(nèi)容的方法了。
雖然實(shí)現(xiàn)起來比較簡(jiǎn)單，但是這個(gè)思想更好。
解決問題 --- 問題二
在問題一中，我們看到resolve之后就可以調(diào)用updateAllContent() 了，那么這個(gè)應(yīng)該怎么寫呢？
首先可以確定的是： 因?yàn)樾枰?qǐng)求的分類不只一個(gè)，所以要使用promise， 并且一定要返回一個(gè)promise，這樣才能繼續(xù)鏈?zhǔn)秸{(diào)用，其中一部分如下：
ar items = state.items;
function getItemPromise(id) {
return new Promise(function (resolve, reject) {
var content = {
"isSingle": 1,
"sbid": 13729792,
"catalog3": id,
"offset": 0,
"pageSize": 10
};
axios.post('/bbg/goods/get_goods_list_wechat', qs.stringify({"data": JSON.stringify(content)}))
.then(function (response) {
if (response.data.code == 626) {
for (let i = 0; i < response.data.data.length; i++) {
commit(UPDATE_ALL_CONTENT, response.data.data[i]);
}
resolve();
}
}).catch(function (error) {
console.log(error);
});
});
}
即調(diào)用這個(gè)函數(shù)，傳入一個(gè)分類的id，然后就可以發(fā)送請(qǐng)求了，獲取到數(shù)據(jù)之后，就把數(shù)據(jù)插入到 內(nèi)容的數(shù)組中， 最后resolve()還告訴then可以執(zhí)行了。
注意: 如何更新一個(gè)數(shù)組呢？
[UPDATE_ALL_CONTENT] (state, item) {
state.contentItems = [...state.contentItems, Object.assign({}, item)];
},
這樣就相當(dāng)于push了。
上面的這個(gè)函數(shù)的意義在于封裝請(qǐng)求，那么對(duì)于請(qǐng)求多個(gè)時(shí)，如何做到呢？
我之前嘗試了下面兩種方法：
FIRST
// first method
var promise = getItemPromise(items[0].id)
for (let j = 1; j < items.length; j++) {
promise.then(function () {
return getItemPromise(items[j].id);
})
}
思路就是先請(qǐng)求第一個(gè)分類，然后循環(huán)，實(shí)際上和下面的效果是一樣的：
var promise = getItemPromise(items[0].id);
promise.then(function () {
console.log("1", window.performance.now());
return getItemPromise(items[1].id);
});
promise.then(function () {
console.log("2", window.performance.now());
return getItemPromise(items[2].id);
});
promise.then(function () {
console.log("3", window.performance.now());
return getItemPromise(items[3].id);
});
promise.then(function () {
console.log("4", window.performance.now());
return getItemPromise(items[4].id);
});
promise.then(function () {
console.log("5", window.performance.now());
return getItemPromise(items[5].id);
});
promise.then(function () {
console.log("6", window.performance.now());
return getItemPromise(items[6].id);
});
問題： 通過這樣的方法最終請(qǐng)求的數(shù)據(jù)是可以請(qǐng)求到的，但是順序并沒有按照我們預(yù)想的思路來執(zhí)行，因?yàn)檫@樣的執(zhí)行方式會(huì)在getItemPromise執(zhí)行之后就立即同時(shí)執(zhí)行后面幾個(gè)then，所以最終得到的順序是不能確定的。
方法二：
// second method
var somePromise = getItemPromise(items[0].id);
for (let k = 1; k < items.length; k++) {
somePromise = somePromise.then(function () {
return getItemPromise(items[k].id);
});
}
這種方法的結(jié)構(gòu)類似于下面這樣：
getItemPromise(items[0].id)
.then(function () {
console.log("1", window.performance.now());
return getItemPromise(items[1].id);
})
.then(function () {
console.log("2", window.performance.now());
return getItemPromise(items[2].id);
})
.then(function () {
console.log("3", window.performance.now());
return getItemPromise(items[3].id);
})
.then(function () {
console.log("4", window.performance.now());
return getItemPromise(items[4].id);
})
.then(function () {
console.log("5", window.performance.now());
return getItemPromise(items[5].id);
})
.then(function () {
console.log("6", window.performance.now());
return getItemPromise(items[6].id);
})
.then(function () {
console.log("7", window.performance.now());
return getItemPromise(items[7].id);
})
.then(function () {
return getItemPromise(items[8].id);
})
.then(function () {
return getItemPromise(items[9].id);
})
.then(function () {
return getItemPromise(items[10].id);
})
.then(function () {
return getItemPromise(items[11].id);
})
這樣請(qǐng)求得到的順序就是相同的了。 但是通過for循環(huán)，不論分類有多少，我們都可以請(qǐng)求到。
也就是說，通過鏈?zhǔn)秸{(diào)用的方式，即.then().then()這樣才會(huì)在一個(gè)異步執(zhí)行完之后執(zhí)行下一個(gè)，值得注意。
下面看下vue 中promise 異步請(qǐng)求數(shù)據(jù)的方法
export function getTypes(type) {
return listDictItems({ code: type }).then((res) => {
if (res.code == 200) {
let list = res.body;
// console.log('list',list);
return list;
}
})
};
組件中：
getTypes('EP_TYPE').then((data) => {console.log('data',data)});//成功
總結(jié)
以上所述是小編給大家介紹的vue中promise的使用及異步請(qǐng)求數(shù)據(jù)的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue項(xiàng)目中更改名字和圖標(biāo)的簡(jiǎn)單實(shí)現(xiàn)步驟
今天在寫vue項(xiàng)目時(shí)碰到的問題是怎么修改vue的網(wǎng)頁圖標(biāo),所以下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中更改名字和圖標(biāo)的簡(jiǎn)單實(shí)現(xiàn),文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
詳解Vue3?父組件調(diào)用子組件方法($refs?在setup()、＜script?setup＞?中使用)
這篇文章主要介紹了Vue3?父組件調(diào)用子組件方法（$refs?在setup()、＜script?setup＞?中使用）,在 vue2 中 ref 被用來獲取對(duì)應(yīng)的子元素，然后調(diào)用子元素內(nèi)部的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
Vue項(xiàng)目中最新用到的一些實(shí)用小技巧
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中最新用到的一些實(shí)用小技巧，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
Vue.js中的計(jì)算屬性、監(jiān)視屬性與生命周期詳解
最近在學(xué)習(xí)vue,學(xué)習(xí)中遇到了一些感覺挺重要的知識(shí)點(diǎn),感覺有必要整理下來,這篇文章主要給大家介紹了關(guān)于Vue.js中計(jì)算屬性、監(jiān)視屬性與生命周期的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要為大家詳細(xì)介紹了Vue3中自定義指令的實(shí)踐，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的小伙伴可以了解一下2023-06-06
vue獲取DOM元素并設(shè)置屬性的兩種實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄獀ue獲取DOM元素并設(shè)置屬性的兩種實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Element UI是一套基于Vue的桌面端組件庫,封裝好了很多常用的UI組件,下面這篇文章主要給大家介紹了關(guān)于vue中elementUI里面一些插件的使用方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
詳解基于mpvue微信小程序下載遠(yuǎn)程圖片到本地解決思路
這篇文章主要介紹了詳解基于mpvue微信小程序下載遠(yuǎn)程圖片到本地解決思路，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
如何使用el-table+el-tree+el-select動(dòng)態(tài)選擇對(duì)應(yīng)值
小編在做需求時(shí),遇到了在el-table表格中加入多條數(shù)據(jù),并且每條數(shù)據(jù)要通過el-select來選取相應(yīng)的值,做到動(dòng)態(tài)選擇,下面這篇文章主要給大家介紹了關(guān)于如何使用el-table+el-tree+el-select動(dòng)態(tài)選擇對(duì)應(yīng)值的相關(guān)資料,需要的朋友可以參考下2023-01-01
Reflect可以操作對(duì)象使用， proxy可以代理對(duì)象，但沒有找到為啥有時(shí)一定要在Proxy代理方法中使用Reflect，這篇文章主要介紹了vue3中的Proxy一定要用Reflect的原因解析,需要的朋友可以參考下2023-04-04