JavaScript之Promise

Promise 对象用于异步计算。一个 Promise 对象表示一个现在或者将来或者永不可用的值。

语法

1
2
3
4
5
6
new Promise(
/** executor */
function(resolve, reject){
...
}
)

参数

  • executor:
    一个函数,该函数的参数为:resolve 和 reject。executor 函数在实现 Promise 对象时立即被调用,甚至在 Promise 的构造函数返回之前就被执行,
    resolve 和 reject 会被传入。resolve 和 reject 都是函数,executor 通常初始化一些异步工作,之后,一旦完成,会调用 resolve 函数清理 promise,
    或者在发送错误时调用 reject 拒绝 promise。

描述

Promise 对象是一个 ’值‘的代理,该’值‘在 promise 对象创建时可能是未知的。它允许你为异步操作的事件结果“成功返回的值”或“失败”绑定一个处理方法。
这使得异步方法可以像同步方法那样返回值;不同于立即返回最终结果,异步方法返回一个 promise 对象,可以在未来提供一个值。

Promise 有以下几种状态:

  • pending:初始状态,既不是 fulfilled 也不是 rejected。
  • fulfilled:表示成功完成操作。
  • rejected:表示该操作失败。

pending 状态的 promise 对象可以通过一个值转换为 fulfilled 或者 rejected 状态。当状态发送转换时,promise.then 绑定的方法就会被调用。

因为 Promise.prototype.then 和 Promise.prototype.catch 方法返回 promise 对象,所以它们可以被链式调用(一种被称为 composition 的操作)。

promise

属性

  • Promise.length
    长度属性,值为 1,构造器参数的数量。

  • Promise.prototype
    表示 Promise 构造器的原型。

方法

  • Promise.all(iterable)
    这个方法返回一个新的 promise 对象,该 promise 对象在 iterable 里所有的 promise 对象都成功的时候才会触发成功,
    一旦有任何一个 iterable 里面的 promise 对象失败则立即触发该 promise 对象的失败。这个新的 promise 对象在触发成功状态以后,
    会把一个包含 iterable 里所有 promise 返回值的数组作为成功回调的返回值,顺序跟 iterable 的顺序保持一致;
    如果这个新的 promise 对象触发了失败状态,它会把 iterable 里第一个触发失败的 promise 对象的错误信息作为它的失败错误信息。
    Promise.all 方法常被用于处理多个 promise 对象的状态集合。

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

  • Promise.reject(reason)
    调用 Promise 的 reject 方法,并返回这个 Promise 对象。

  • Promise.resolve(value)
    用成功值 value 完成一个 Promise 对象。如果该 value 带有 then 方法,返回的 Promise 对象会跟随这个 value,采用这个 value 的最终状态;
    否则的话返回值会用这个 value 满足(fulfilled)返回的 Promise 对象。

Promise 原型

属性

  • Promise.prototype.constructor
    返回创建了实例原型的函数,默认为 Promise 函数。

方法

  • Promise.prototype.catch(onRejected)
    添加一个 rejection 回调到当前 promise ,返回一个新的 promise。如果这个回调被调用,新 promise 将以它的返回值来 resolve,否则如果当前
    promise 进入 fulfilled 状态,则以当前 promise 的成功结果作为新 promise 的成功结果。

  • Promise.prototype.then(onFulfilled, onRejected)
    添加一个成功和失败回调到当前 promise,返回一个新的 promise,将以回调的返回值来 resolve。

示例

下面例子展示了 Promise 的机制。每当按钮被点击时,testPromise() 方法就会被执行。该方法会创建一个用 window.setTimeout 1 到 3 秒后完成的 promise。
这里通过了 p1.then 方法的满足回调,简单的输出了 promise 的满足过程,这些输出显示了该方法的同步部分是如何和 promise 的异步完成解耦的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<button onclick="testPromise();">点我</button>
<div id="log"></div>
<script>
'use strict';
var promiseCount = 0;
function testPromise() {
var thisPromiseCount = ++promiseCount;
var log = document.getElementById('log');
log.insertAdjacentHTML('beforeend', thisPromiseCount + ') 开始(同步代码开始)<br/>');
// 创建一个新的promise: 然后用完成这个promise
var p1 = new Promise(function (resolve, reject) {
// 完成函数带着完成(resolve)或拒绝(reject)promise 的能力被执行
log.insertAdjacentHTML('beforeend', thisPromiseCount + ') Promise开始(异步代码开始)<br/>');
// 这只是个创建异步完成的示例
window.setTimeout(function () {
// 我们满足(fullfil)了这个promise!
resolve(thisPromiseCount)
}, Math.random() * 2000 + 1000);
});
// 定义当promise被满足时应做什么
p1.then(function (val) {
// 输出一段信息和一个值
log.insertAdjacentHTML('beforeend', val + ') Promise被满足了(异步代码结束)<br/>');
});
log.insertAdjacentHTML('beforeend', thisPromiseCount + ') 建立了Promise(同步代码结束)<br/><br/>');
}
</script>
坚持原创技术分享,您的支持将鼓励我继续创作!