上节课我们做了两个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
对象看一下:
我来看在Promise
对象中有一个属性叫做PromiseState
,这个就是我们一直在说的Promise
对象的状态,那么这个属性有几种状态测存在呢?总共有一下三种:
pending
未决定的resolved
/fulfilled
成功rejected
失败
而当一个Promise
对象在初始化的时候状态默认都是pending
,其中resolved
和fulfilled
是同一个意思,只是名称变了一下,这两个是同一种状态。而状态改变只有两种可能:
- 从
pending
变成resolved
/fulfilled
- 从
pending
变成rejected
不存在从resolved
/ fulfilled
或者rejected
变成pending
,也不存在resolved
/ fulfilled
与rejected
之间相互转换。而且一个Promise
对象只能改变一次状态。无论封装的异步任务成功还是失败,都会有一个结果数据,成功的结果数据通常称为value
,而失败的结果数据通常称为reason
。
Promise
结果属性
我们介绍完了Promise
对象,我们来介绍Promise
对象的另外一个属性,我们之前也一直在说,Promise
封装异步任务,无论成功与否都会调用resolve
和reject
函数的其中一个,而且这两个函数都可以接收异步任务生成的结果值,那么这个结果值是什么呢?这也是Promise
对象的一个属性。
我们来看一下,我们在打印出的Promise
对象中有一个属性叫PromiseResult
这就是我们所说的Promise
对象的结果值。这个属性存放的就是Promise
对象中异步任务成功或者失败的结果。而且这个属性也是一个对象,里面包含状态码,状态字符串,以及结果数据。
而这个属性是不允许手动修改的,只有resolve
和reject
函数可以修改,当通过这两个函数修改了PromiseResult
属性之后,在后续的then
方法中来直接取用这个属性中的值。
Promise
的工作流程
我们现在已经介绍完了Promise
对象的属性,那么接下来我们来介绍一下Promise
的工作流程吧
我们首先来看着个流程图首先我们要初始化一个Promise
对象,当我们初始化了这个对象之后,这个对象的PromiseState
属性默认为pending
,紧接着开始执行异步任务,然后任务执行成功,则调用resolve
函数,否则调用reject
函数,然后我们就会获得一个PromiseState
为resolved
或者rejected
的Promise
对象。然后当我们调用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/