天天看點

vue中Promise { pending }是什麼?為何會出現這種狀态,怎麼解決這種問題?

首先你需要知道 promise 要用then接收或者async await

例如:a() 是一個Promise封裝的方法

// 定義一個變量直接a() 指派給 b
let b = this.a()
console.log(b)  //這裡就會傳回 Promise {<pending>}      

第一種方式 then 接收 ,也就是收把所需資料在then中得到,後續邏輯也隻能在then中實作

let b = this.a()
.then(res =>{
  //.then是接收正确傳回的資訊
  console.log(res) // {...}
})
.catch(err =>{
  // .catch 傳回報錯資訊
  console.log(err)
})      

第二種方式 async await接收:

async c(){
  let b = await this.a()
  console.log(b)  // 現在就是正确傳回了 {...}
  
}      

這裡要注意的是 async 和 await 必須是一起的

這裡說下為什麼會這樣???

Promise是異步執行的, 什麼叫異步呢, 就是你以為代碼是一行執行完才執行下一行嗎? 不是的, 你promise還沒執行then的時候,就開始執行下一行了,導緻擷取的資料出現pending狀态

比如以下用法是有問題的:

let table_id = getTableIdByColumnId(that,id).then(res => {
      return res.data.table_id
    });
goToTableDetail(that,table_id);      

then還沒有return時候,已經開始執行goToTableDetail(that,table_id);,導緻table_id 為object 出現pending情況。

正确用法:

getTableIdByColumnId(that,id).then(res => {
      console.info(res);
      goToTableDetail(that,res.data.table_id);
    });      

繼續閱讀