promise两眼空空到看懂 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第13天前言每一个前端小白都绕

这是我参与「第四届青训营」笔记创作活动的第13天

前言

每一个前端小白都绕不过刚开始学promise时得懵，看了很多博客，好像都说了解决回调地狱得问题，但看完之后又感觉没有明白干了什么，有什么用。有时候可能看了几遍过段时间又不明白时什么意思了。今天又复习了一遍在此总结一遍，一步一步理清promise。

基本架构

用promise进行一个ajax请求，来理解promise干了什么

在请求之后如果请求成功（状态码在200和300之间）就执行resolve，否则请求失败执行reject，后面跟的参数回传到后面的.then中。然后再.then中对对应的结果经行处理。成功的话就执行第一个函数，失败就是第二个函数。

简单得看完案例之后，总结几个点：

创建promise时传入两个函数（resolve，reject），用来改变promise得状态和进行后续操作。
如果执行了resolve() .then时就会执行定义的第一个函数，如果执行了reject()就会执行第二个函数。
resolve和reject中的参数会被传到 .then的函数中进行后续的处理

然后我们再看其中的细节

romise的状态属性介绍

状态是 promise实例对象当中的属性：PromiseState

Promise有三种状态 [pending] [rejected] [fulfilled]

[pending] 未决定的，默认等待状态，等待resolve和reject的调用
[rejected] 失败，会被 .then中的第二个函数捕获，或被catch捕获
[fulfilled] 成功，会被 .then中的第一个函数捕获(也叫resolved)

promise的状态只能由 [pending]-->[fulfilled] 或是由 [pending]-->[rejected] 且promise对象的状态只能改变一次，无论失败还是成功都有数据结果，成功的结果一。叫为value，失败的较为reason或者err

状态的改变

调用 resolve()[pending]-->[fulfilled]
调用 reject()[pending]-->[rejected]
抛出异常 throw ：如果当前是pending，就会变为reject

不能直接对这个属性的值进行操作

promise 对象的值

promise实例对象中另一个属性：PromiseSesult

用来保存 promise对象运行的结果

resolve()和reject()可以对这个值进行赋值，当作参数写入。之后这个值就可以在 .then中被获取到，并对其进行相关操作

promise工作的基本流程

promise的API

构造函数Promise(excutor){}

executor函数:执行器(resolve, reject) =>{}
resolve函数:内部定义成功时我们调用的函数value => {}
reject函数:内部定义失败时我们调用的函数reason => {}

说明: executor 会在 Promise内部同步立即调用,异步操作在执行器中执行

resolve和reject都是promise内定好的，不需要去定义

`promise.prototype.then(value =>{},reason =>{})`

value =>{}第一函数，成功的回调函数
reason =>{}第二参函数，失败的回调函数

说明:指定用于得到成功value的成功回调和用于得到失败reason的失败回调

`promise.prototype.catch(reason =>{})`

reason =>{} 失败时的回调函数

`Promise.resolve`方法: (value) =>{}

value:成功的数据或promise对象

说明:返回一个成功/失败的 promise对象

`Promise.reject`方法: (reason) => {}

(1) reason:失败的原因

说明:返回一个失败的promise对象

`Promise.all`方法:(promises) =>{}

(1) promises:包含n个promise的数组

说明:返回一个新的 promise，只有所有的 promise都成功才成功，只要有一个失败了就直接失败

`Promise.race`方法: (promises) =>{}

(1) promises:包含n个promise 的数组

说明:返回一个新的 promise，第一个完成的 promise的结果状态就是最终的结果状态。

一个Promise执行多个回调

当我们为一个 Promise 制定了多个.then,那么这几个then都会执行

改变promise状态和指定回调函数谁先谁后?

(1)都有可能，正常情况下是先指定回调再改变状态，但也可以先改状态再指定回调

(2)如何先改状态再指定回调(.then)?

在执行器中直接调用resolve()/reject()延迟更长时间才调用then()

(3)什么时候才能得到数据（执行.then()中的函数?

如果先指定的回调，那当状态发生改变时，回调函数就会调用，得到数据如果先改变的状态，那当指定回调时，回调函数就会调用，得到数据

promise.then()返回的新promise的结果状态由什么决定?

1)简单表达:由 then()指定的回调函数执行的结果决定

(2)详细表达:

如果抛出异常，新promise变为 rejected, reason为抛出的异常。

如果返回的是非promise的任意值，新promise变为resolved, value为返回的值。

如果返回的是另一个新promise，此promise的结果就会成为新promise的结果

情况1：

情况2：

情况3：

Promise串联多个链式调用

（1）promise的then方法，可以返回一个新的promise对象，就可以展开 then() 的链式调用

（2）通过then的链式调用串联多个同步/异步操作

总结

以上就是新手掌握 promise 的必要基础，理解了这些内容，再往后深入理解promise也不是问题了

总结完毕OVER

promise两眼空空到看懂 | 青训营笔记

前言