vue中Promise { pending }是什么？为何会出现这种状态，怎么解决这种问题？

Posted 2022-10-17

首先你需要知道 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);
    );

 

作者：少帅