本篇文章為大家展示了怎么在vue中使用promise異步請(qǐng)求數(shù)據(jù)，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)專注于澗西企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城系統(tǒng)網(wǎng)站開發(fā)。澗西網(wǎng)站建設(shè)公司,為澗西等地區(qū)提供建站服務(wù)。全流程按需開發(fā)網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

實(shí)現(xiàn)思路

在商品頁(yè), created 鉤子函數(shù)觸發(fā)獲取分類的http請(qǐng)求，請(qǐng)求到結(jié)果后，開始請(qǐng)求所有的具體商品并渲染。

遇到的問(wèn)題

?由于請(qǐng)求商品分類是異步的， 怎么判斷異步請(qǐng)求完成， 也就是說(shuō)請(qǐng)求具體商品的時(shí)機(jī)是什么時(shí)候。
?獲取到所有的商品必須發(fā)送請(qǐng)求，請(qǐng)求時(shí)異步的，怎么保證能夠按照順序獲取到。

解決問(wèn)題 --- 問(wèn)題一

　　針對(duì)問(wèn)題一，最好的方式還是使用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)起來(lái)比較簡(jiǎn)單，但是這個(gè)思想更好。

解決問(wèn)題 --- 問(wèn)題二

　　在問(wèn)題一中，我們看到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);
 });

問(wèn)題： 通過(guò)這樣的方法最終請(qǐng)求的數(shù)據(jù)是可以請(qǐng)求到的，但是順序并沒有按照我們預(yù)想的思路來(lái)執(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)求得到的順序就是相同的了。 但是通過(guò)for循環(huán)，不論分類有多少，我們都可以請(qǐng)求到。

也就是說(shuō)，通過(guò)鏈?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)});//成功

上述內(nèi)容就是怎么在vue中使用promise異步請(qǐng)求數(shù)據(jù)，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文題目：怎么在vue中使用promise異步請(qǐng)求數(shù)據(jù)-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://weahome.cn/article/dhecse.html