当前位置：首页 > article >正文

ES6 Promise的用法，async/await异步处理同步化

article 2024/11/14 22:28:42

文章目录

一、什么是promise ？
二、await / async ES7的新规范，异步处理同步化

一、什么是promise ？

在这里插入图片描述

promise是解决异步的方法，本质上是一个构造函数，可以用它实例化一个对象。对象身上有resolve、reject、all，原型上有then、catch方法。promise对象有三种状态：pending（初识状态/进行中）、resolved或fulfilled（成功）、rejected（失败）

pending。它的意思是 “待定的，将发生的”，相当于是一个初始状态。创建Promise对象时，且没有调用resolve或者是reject方法，相当于是初始状态。这个初始状态会随着你调用resolve，或者是reject函数而切换到另一种状态。

请添加图片描述

resolved。表示解决了，就是说这个承诺实现了。要实现从pending到resolved的转变，需要在创建Promise对象时，在函数体中调用了resolve方法
rejected。拒绝，失败。表示这个承诺没有做到，失败了。要实现从pending到rejected的转换，只需要在创建Promise对象时，调用reject函数。

请添加图片描述

看上面的引用，promise就是用来解决异步的方法，光看上面的解释可能不懂什么意思，但是它后面说的实例化对象后端方法，你肯定用过，如then、catch等，通过以下代码打印一下他里面的方法。

console.dir(Promise)

浏览器打印结果：

请添加图片描述
下面就通过promise实例化，完成对上面回调地狱函数进行重构

//promise链式调用
this.getNav().then(res=>{
  let id=res.data[0].id;
  return this.getArticle(id);
}).then(res=>{
  let id=res.data[0].id;
  return this.getComment(id)
}).then(res=>{
  console.log(res)
})

二、await / async ES7的新规范，异步处理同步化

这两个命令是成对出现的，如果使用await没有在函数中使用async命令，那就会报错，如果直接使用async没有使用await不会报错，只是返回的函数是个promise，可以，但是没有意义，所以这两个一起使用才会发挥出它们本身重要的作用。

async onLoad() {
  let id,res;
  res=await this.getNav();
  id=res.data[0].id;
  res=await this.getArticle(id);
  id=res.data[0].id;
  res=await this.getComment(id);
  console.log(res)
}