大家好，这里是修真院前端小课堂，今天给大家分析的是

《什么是 promise？》

一、背景介绍

什么是 promise？

Promise 是异步编程的一种解决方案，比传统的解决方案 —— 回调函数和事件 —— 更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了 Promise 对象。

所谓 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

二、. 知识剖析

1、Promise 的基本用法

ES6 规定，Promise 对象是一个构造函数，用来生成 Promise 实例。下面代码创造了一个 Promise 实例。

2、resolve 和 reject

Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 和 reject。

它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve 函数的作用是，将 Promise 对象的状态从 “未完成” 变为 “成功”（即从 Pending 变为

Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject 函数的作用是，

将 Promise 对象的状态从 “未完成” 变为 “失败”（即从 Pending 变为

Rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise 实例生成以后，可以用 then 方法分别指定 Resolved 状态和 Rejected 状态的回调函数。

三。常见问题

如何使用 Promise？

四、解决方案

1、用法如下：

需要注意的是，new 一个 Promise 对象时，里面的代码就直接运行了。

所以我们用 Promise 的时候一般是包在一个函数中，在需要的时候去运行这个函数。

2、如果不用 Promise 而是用回调函数去写：

then 里面的函数就跟我们平时的回调函数一个意思，能够在 runAsync 这个异步任务执行完成之后被执行。这就是 Promise 的作用了，简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。写成回调函数如下：

3、两种写法的区别：

那么问题来了，既然回调函数回调函数能实现异步操作，为什么还要用 Promise 呢？

请考虑这种情况：有多层回调该怎么办？如果 callback 也是一个异步操作，而且执行完后也需要有相应的回调函数，该怎么办呢？总不能再定义一个 callback2，然后给 callback 传进去吧。而 Promise 的优势在于，可以在 then 方法中继续写 Promise 对象并返回，然后继续调用 then 来进行回调操作。

4、PROMISE 的链式调用

所以，从表面上看，Promise 只是能够简化层层回调的写法，而实质上，Promise 的精髓是 “状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递 callback 函数要简单、灵活的多。所以使用 Promise 的正确场景是这样的：

runAsync1、runAsync2、runAsync3 这三个函数的定义：

在 then 方法中，你也可以直接 return 数据而不是 Promise 对象，在后面的 then 中就可以接收到数据了，比如我们把上面的代码修改成这样

5、REJECT 的用法

事实上，我们前面的例子都是只有 “执行成功” 的回调，还没有 “失败” 的情况， reject 的作用就是把 Promise 的状态置为 rejected，这样我们在 then 中就能捕捉到，然后执行 “失败” 情况的回调。看下面的代码。

7、CATCH 的用法

我们知道 Promise 对象除了 then 方法，还有一个 catch 方法，它是做什么用的呢？其实它和 then 的第二个参数一样，用来指定 reject 的回调，用法是这样：

上面代码的效果和写在 then 的第二个参数里面一样。不过它还有另外一个作用：在执行 resolve 的回调（也就是上面 then 中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死 js，而是会进到这个 catch 方法中。请看下面的代码：

也就是说进到 catch 方法里面去了，而且把错误原因传到了 reason 参数中。即便是有错误的代码也不会报错了，这与我们的 try/catch 语句有相同的功能。

五、. 编码实战

见视频或者 ppt

六、扩展思考

1、all 的用法

Promise 的 all 方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。我们仍旧使用上面定义好的 runAsync1、runAsync2、runAsync3 这三个函数，看下面的例子：

用 Promise.all 来执行，all 接收一个数组参数，里面的值最终都算返回 Promise 对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到 then 里面。那么，三个异步操作返回的数据哪里去了呢？都在 then 里面呢，all 会把所有异步操作的结果放进一个数组中传给 then，就是上面的 results

有了 all，你就可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据，是不是很酷？有一个场景是很适合用这个的，一些游戏类的素材比较多的应用，打开网页时，预先加载需要用到的各种资源如图片、flash 以及各种静态文件。所有的都加载完后，我们再进行页面的初始化。

2、race 的用法

all 方法的效果实际上是「谁跑的慢，以谁为准执行回调」，那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，这就是 race 方法，这个词本来就是赛跑的意思。race 的用法与 all 一样，看一下下面的代码：

在 then 里面的回调开始执行时，runAsync2 () 和 runAsync3 () 并没有停止，仍旧再执行。于是再过 1 秒后，输出了他们结束的标志。

这个 race 有什么用呢？使用场景还是很多的，比如我们可以用 race 给某个异步请求设置超时时间，并且在超时后执行相应的操作，代码如下：

requestImg 函数会异步请求一张图片，我把地址写为 "xxxxxx"，所以肯定是无法成功请求到的。timeout 函数是一个延时 5 秒的异步操作。我们把这两个返回 Promise 对象的函数放进 race，于是他俩就会赛跑，如果 5 秒之内图片请求成功了，那么遍进入 then 方法，执行正常的流程。如果 5 秒钟图片还未成功返回，那么 timeout 就跑赢了，则进入 catch，报出 “图片请求超时” 的信息。

7. 更多讨论

1、没听懂 or 太多没听过来？

ES6 Promise 的基本就是有这么多，也都很重要。没听过来的同学可以去看下 ppt 上的 demo 或者直接去看参考的文章

2、浏览器对 Promise 支持性？

从 caniuse 得到的数据：

什么是 promise？相关推荐

setTimeout、setInterval、promise、async/await的顺序详解（多种情况，非常详细~）
本文很长,列举的情况很多. 在阅读本文之前,如果您有充足的时间,请新建一个项目与本文一同实践. 每段代码都有对应的解释,但是自己动手尝试印象才会更深哦~ setInterval:表示多久执行一次,需要 ...
C++多线程：异步操作std::async和std::promise
文章目录 std::async 简介使用案例 std::promise 简介成员函数总结之前的文章中提到了C++多线程中的异步操作机制 C++ 多线程:future 异步访问类(线程之间安全便 ...
ES6中的Promise详解
Promise 在 JavaScript 中很早就有各种的开源实现,ES6 将其纳入了官方标准,提供了原生 api 支持,使用更加便捷. 定义 Promise 是一个对象,它用来标识 JavaScri ...
关于ES6中Promise的应用-顺序合并Promise，并将返回结果以数组的形式输出
1.Promise 基础知识梳理创建一个Promise实例 const promise = new Promise(function(resolve, reject) {if (success){r ...
promise实现多个请求并行串行执行
早上查资料,偶然发现这个话题,发现自己并不会,于是乎,下来研究了一下. 想想之前我们用jquery写请求的时候,要实现请求的串行执行,我们可能是这么做的. $.ajax({url: '',data: ...
异步编程之Promise(2)：探究原理
异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力异步编程之Promise(2):探究原理异步编程之Promise(3):拓展进阶异步编程之Generator(1)--领略魅 ...
自己动手写cpu pdf_自己动手写 Promise
这段时间在学习Promise,但始终不得要领.为了更好地理解Promise,我决定自己实现一个简易版的Promise,以学习Promise工作原理.该工程名为ToyPromise,仓库地址如下: ht ...
promise 和 async await区别
什么是Async/Await? async/await是写异步代码的新方式,以前的方法有回调函数和Promise. async/await是基于Promise实现的,它不能用于普通的回调函数. as ...
Promise - js异步控制神器
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 首先给来一个简单的demo看看Promise是怎么使用的: <!DOCTYPE html> ...
Promise的实例用法
设定函数 function chiFan() {return new Promise(function(resolve, reject) {console.log("chiFan" ...