【ES6】promise 模式

⭐️ 本文首发自 前端修罗场(点击即可加入)，一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。现在加入，即可参与打卡挑战，和一群人一起努力。挑战成功即可获取一次免费的模拟面试机会，进而评估知识点的掌握程度，获得更全面的学习指导意见，不走弯路，不吃亏！

---

概述

1. 一个Promise对象代表着一个还未完成，但预期将来会完成的操作；

2. Promise 对象是一个返回值的代理；

3. 它允许你为异步操作的成功或失败指定处理方法；

4. 异步方法会返回一个包含了原返回值的 promise 对象来替代原返回值。

Promise对象的三种状态：

（1）pending: 初始状态, 非 fulfilled 或 rejected.
（2）fulfilled: 成功的操作.
（3）rejected: 失败的操作.

Pending—转化—>fulfilled或者rejected；

当状态发生转换时，promise.then绑定的方法（函数句柄）就会被调用。

(当绑定方法时，如果 promise对象已经处于 fulfilled 或 rejected 状态，那么相应的方法将会被立刻调用， 所以在异步操作的完成情况和它的绑定方法之间不存在竞争条件。)

图示：

语法：

New Promise(function(resolve,reject){...});

参数解释：

Resolve:处理执行成功；
Reject:处理执行失败；

一旦我们的操作完成即可调用这些函数。

方法：

• Promise.all(iterable)：当 iterable 参数里所有的 promise 都被解决后，该 promise 也会被解决。

• Promise.race(iterable)：当 iterable 参数里的任意一个子 promise 被成功或失败后，父 promise 马上也会用子promise的成功返回值或失败详情作为参数调用父 promise 绑定的相应句柄，并返回该 promise 对象。

• Promise.reject(reason)：调用 Promise的 rejected 句柄，并返回这个 Promise 对象。

• Promise.resolve(value)：用成功值 value 解决一个 Promise 对象。

（1）、如果该value为可继续的（thenable，即带有then方法），返回的Promise对象会“跟随”这个value，采用这个value的最终状态；

（2）、否则的话：返回值会用这个value满足（fullfil）返回的Promise对象。

Promise原型

方法：

1、Promise.prototype.catch(onRejected)

添加一个否定(rejection) 回调到当前 promise 。

（1）如果这个回调被调用，新 promise 将以它的返回值来resolve；
（2）如果当前promise进入fulfilled状态，则以当前promise的肯定结果作为新promise的肯定结果。

2、Promise.prototype.then(onFulfilled, onRejected)

添加肯定和否定回调到当前 promise, 返回一个新的 promise, 将以回调的返回值 来resolve.

实践——加载图片

兼容性

桌面：

支持： Chrome 32.0+\火狐29.0+\Opera19+\Safari7.1+；
不支持：IE;

移动端：

支持：Android WebView、火狐Mobile29.0+、Safari 8+、Chrome for Android 32.0+
不支持：Android、IE Mobile、Opera Mobile

参考：

• http://liubin.github.io/promises-book/#__4 JavaScript Promise迷你书（中文版）

• http://www.infoq.com/cn/news/2011/09/js-promise/ JavaScript异步编程的Promise模式

• http://segmentfault.com/a/1190000000684654 浅谈Javascript中Promise对象的实现