天天看点

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);
    });