VUE 項目中 如何獲取Promise對象中的PromiseResult中的數(shù)據(jù)

問題描述

如果想要在接口請求方法的外面拿到請求的結(jié)果，再做相關(guān)數(shù)據(jù)處理，往往我們拿到的卻是一個Promise對象，案例如下：

methods: {
  getInfoList(id) {
    let list = [];
    // 接口請求封裝的方法
    list = infoStore(id)
    console.log('list :>> ', list);
  }
}

打印結(jié)果

可以看到，請求返回的值放在了Promise對象的PromiseResult中，但是直接取值又取不出來，這是因為：
Promise 簡單說就是一個容器，里面保存著某個未來才會結(jié)束的事件（通常是一個異步操作）的結(jié)果；
從語法上說， Promise 是一個對象，從中可以獲取異步操作的消息；
所以想要直接獲取到Promise對象的值，需要通過 async await 來獲取

解決方案

通過 async await 來獲取
async 用于申明一個function是異步的；而await則可以認為是 async await的簡寫形式，是等待一個異步方法執(zhí)行完成的；
async/awiat的使用規(guī)則：

• async和await要一起用；
• async 表示這是一個async函數(shù)， await只能用在async函數(shù)里面，不能單獨使用；
• async 返回的是一個Promise對象，await就是等待這個promise的返回結(jié)果后，再繼續(xù)執(zhí)行；
• await 等待的是一個Promise對象，后面必須跟一個Promise對象，但是不必寫then()，直接就可以得到返回值；

async getShelfList(id) {
  letlist = [];
  list = await infoStore(id)
  console.log('list :>> ', list);
}

打印結(jié)果

總結(jié)

異步獲取Promise對象的值還可以使用Promise對象的then方法，但是then方法是在接口請求對象的里面執(zhí)行數(shù)據(jù)處理的操作

getShelfList(id) {
  let list = [];
  infoStore(id).then((res) => {
  	// res則為promise對象的返回的值，可以在then()方法里面做數(shù)據(jù)處理
    list = res.data
  })
}

兩個方法使用場景不一樣，可按個人情況擇優(yōu)使用

以上是個人經(jīng)驗，希望對大家有所幫助！

更新

當(dāng)使用 async await 來獲取Promise對象的值的時候，正常函數(shù)里是沒有問題，但是放在forEach()循環(huán)里面會報錯，對于這個問題，請參考另外以下文章，此文中將詳細介紹forEach循環(huán)中不能使用async await異步調(diào)用的原因，以及不同循環(huán)中的使用方法：
如何在 for/forEach/map 循環(huán)里面使用異步調(diào)用 async/await

到此這篇關(guān)于VUE 如何獲取Promise對象中的PromiseResult中的數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue 獲取PromiseResult中的數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論