上节课我们做了两个Promise的练习,一个是文件读取,另一个是ajax请求发送。但是我们也说了这么多了,那么Promise的工作流程到底是什么样的呢?那么我们接下来就来介绍一下。

Promise的状态属性

我们之前说过Promise对象可以封装一个异步任务,在异步成功的时候调用resolve函数,在失败的时候调reject函数,而且这两个函数会把Promise对象的状态改成成功或失败。那么这个所谓的状态到底是个什么玩意儿呢?

其实这里我们所说的状态其实就是Promise对象的一个状态属性我们来看:

const btn = document.getElementById("btn");
btn.addEventListener(
  "click",
  () => {
    let p = new Promise(...);
    console.log(p);
    ...
  }
);

我们看之前的这段代码,我们打印一下我创建的Promise对象看一下:

image-20220314093113249

我来看在Promise对象中有一个属性叫做PromiseState,这个就是我们一直在说的Promise对象的状态,那么这个属性有几种状态测存在呢?总共有一下三种:

  • pending 未决定的
  • resolved / fulfilled 成功
  • rejected 失败

而当一个Promise对象在初始化的时候状态默认都是pending,其中resolvedfulfilled是同一个意思,只是名称变了一下,这两个是同一种状态。而状态改变只有两种可能:

  • pending变成resolved / fulfilled
  • pending变成rejected

不存在从resolved / fulfilled或者rejected变成pending,也不存在resolved / fulfilledrejected之间相互转换。而且一个Promise对象只能改变一次状态。无论封装的异步任务成功还是失败,都会有一个结果数据,成功的结果数据通常称为value,而失败的结果数据通常称为reason

Promise结果属性

我们介绍完了Promise对象,我们来介绍Promise对象的另外一个属性,我们之前也一直在说,Promise封装异步任务,无论成功与否都会调用resolvereject函数的其中一个,而且这两个函数都可以接收异步任务生成的结果值,那么这个结果值是什么呢?这也是Promise对象的一个属性。

image-20220314095908222

我们来看一下,我们在打印出的Promise对象中有一个属性叫PromiseResult这就是我们所说的Promise对象的结果值。这个属性存放的就是Promise对象中异步任务成功或者失败的结果。而且这个属性也是一个对象,里面包含状态码,状态字符串,以及结果数据。

而这个属性是不允许手动修改的,只有resolvereject函数可以修改,当通过这两个函数修改了PromiseResult属性之后,在后续的then方法中来直接取用这个属性中的值。

Promise的工作流程

我们现在已经介绍完了Promise对象的属性,那么接下来我们来介绍一下Promise的工作流程吧

未命名绘图

我们首先来看着个流程图首先我们要初始化一个Promise对象,当我们初始化了这个对象之后,这个对象的PromiseState属性默认为pending,紧接着开始执行异步任务,然后任务执行成功,则调用resolve函数,否则调用reject函数,然后我们就会获得一个PromiseStateresolved或者rejectedPromise对象。然后当我们调用then方法时,如果是resolved状态,则会调用第一个参数的函数,否则就会调第二个参数的函数,并返回一个新的Promise对象。

以上便是Promise的基本工作流程。

总结

  • Promise的状态是指Promise对象的PromiseState属性
  • pending 未决定的
  • resolved / fulfilled 成功
  • rejected 失败
  • Promise的状态只能从pending转为resolved或者rejected
  • Promise异步任务的结果值是Promise对象的PromiseResult属性
  • PromiseResult属性只能由resolve或者reject函数来修改

Copyright statement:The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article:https://work.lynchow.com/article/flow_of_promise/