快捷導(dǎo)航

VUE獲取Promise對(duì)象中PromiseResult中的數(shù)據(jù)(最新推薦)

更新時(shí)間：2023年10月30日 11:33:58 作者：TTong___

如果想要在接口請(qǐng)求方法的外面拿到請(qǐng)求的結(jié)果,再做相關(guān)數(shù)據(jù)處理,往往我們拿到的卻是一個(gè)Promise對(duì)象,那么遇到這樣的問題如何解決呢,下面小編給大家?guī)砹薞UE?項(xiàng)目中?如何獲取Promise對(duì)象中的PromiseResult中的數(shù)據(jù)?,感興趣的朋友一起看看吧

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

問題描述

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

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

打印結(jié)果

可以看到，請(qǐng)求返回的值放在了Promise對(duì)象的PromiseResult中，但是直接取值又取不出來，這是因?yàn)椋?br />Promise 簡(jiǎn)單說就是一個(gè)容器，里面保存著某個(gè)未來才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果；
從語(yǔ)法上說， Promise 是一個(gè)對(duì)象，從中可以獲取異步操作的消息；
所以想要直接獲取到Promise對(duì)象的值，需要通過 async await 來獲取

解決方案

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

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

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

打印結(jié)果

總結(jié)

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

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

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

以上是個(gè)人經(jīng)驗(yàn)，希望對(duì)大家有所幫助！

更新

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

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

您可能感興趣的文章: