ECMAScript 2015（ES6）规范中的promise – 转

概述

Promise 对象用于延迟(deferred) 计算和异步(asynchronous ) 计算.。一个Promise对象代表着一个还未完成，但预期将来会完成的操作。

语法

new Promise(executor);
new Promise(function(resolve, reject) { … });

参数

executor
带有 resolve 、reject两个参数的函数对象。第一个参数用在处理执行成功的场景，第二个参数则用在处理执行失败的场景。一旦我们的操作完成即可调用这些函数。

描述
Promise 对象是一个返回值的代理，这个返回值在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。这使得异步方法可以像同步方法那样返回值：异步方法会返回一个包含了原返回值的 promise 对象来替代原返回值。

Promise对象有以下几种状态:

- pending: 初始状态, 非 fulfilled 或 rejected.
- fulfilled: 成功的操作.
- rejected: 失败的操作.

pending状态的promise对象既可转换为带着一个成功值的fulfilled 状态，也可变为带着一个失败信息的 rejected 状态。当状态发生转换时，* promise.then *绑定的方法（函数句柄）就会被调用。(当绑定方法时，如果 promise对象已经处于 fulfilled 或 rejected 状态，那么相应的方法将会被立刻调用，所以在异步操作的完成情况和它的绑定方法之间不存在竞争条件。)

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

注意：如果一个promise对象处在fulfilled或rejected状态而不是pending状态，那么它也可以被称为settled状态。你可能也会听到一个术语resolved ，它表示promise对象处于settled状态，或者promise对象被锁定在了调用链中。关于promise的状态， Domenic Denicola 的 States and fates 有更多详情可供参考。

属性

Promise.length
- 长度属性，其值为 1 (构造器参数的数目).
Promise.prototype
- 表示 Promise 构造器的原型.

方法

Promise.all(iterable)
返回一个promise对象，当iterable参数里所有的promise都被解决后，该promise也会被解决。
Promise.race(iterable)
当iterable参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象。
Promise.reject(reason)
调用Promise的rejected句柄，并返回这个Promise对象。
Promise.resolve(value)
用成功值value解决一个Promise对象。如果该value为可继续的（thenable，即带有then方法），返回的Promise对象会“跟随”这个value，采用这个value的最终状态；否则的话返回值会用这个value满足（fullfil）返回的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

这个小例子展示了Promise的机制。每当被按下时，testPromise() 函数就会被执行。该函数会创建一个用window.setTimeout在1到3秒（随机）后用‘result’字符串解决的promise。

这里通过p1.then方法的满足回调，简单的输出了promise的满足过程，这些输出显示了该方法的同步部分是如何和promise的异步解决解耦的。

<!--标注：下面略微修改了英文版的示例，主要是执行3次testPromise()的效果，如果您有疑问，可以参看英文的说明文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise-->
<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: 然后用'result'字符串解决这个promise (3秒后)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/>');}testPromise();testPromise();testPromise();
</script>

这个例子在按钮被按下后执行。你需要一个支持Promise的浏览器。你能通过短时间内按多次按钮看到不同的promise一个接一个的被满足。

Example using new XMLHttpRequest()

创建一个Promise

这个例子展示了如何用promise报告一个XMLHttpRequest的成功或失败。

'use strict';// A-> $http function is implemented in order to follow the standard Adapter pattern
function $http(url){// A small example of objectvar core = {// Method that performs the ajax requestajax : function (method, url, args) {// Creating a promisevar promise = new Promise( function (resolve, reject) {// Instantiates the XMLHttpRequestvar client = new XMLHttpRequest();var uri = url;if (args && (method === 'POST' || method === 'PUT')) {uri += '?';var argcount = 0;for (var key in args) {if (args.hasOwnProperty(key)) {if (argcount++) {uri += '&';}uri += encodeURIComponent(key) + '=' + encodeURIComponent(args[key]);}}}client.open(method, uri);client.send();client.onload = function () {if (this.status >= 200 && this.status < 300) {// Performs the function "resolve" when this.status is equal to 2xxresolve(this.response);} else {// Performs the function "reject" when this.status is different than 2xxreject(this.statusText);}};client.onerror = function () {reject(this.statusText);};});// Return the promisereturn promise;}};// Adapter patternreturn {'get' : function(args) {return core.ajax('GET', url, args);},'post' : function(args) {return core.ajax('POST', url, args);},'put' : function(args) {return core.ajax('PUT', url, args);},'delete' : function(args) {return core.ajax('DELETE', url, args);}};
};
// End A// B-> Here you define its functions and its payload
var mdnAPI = 'https://developer.mozilla.org/en-US/search.json';
var payload = {'topic' : 'js','q'     : 'Promise'
};var callback = {success : function(data){console.log(1, 'success', JSON.parse(data));},error : function(data){console.log(2, 'error', JSON.parse(data));}
};
// End B// Executes the method call
$http(mdnAPI) .get(payload) .then(callback.success) .catch(callback.error);// Executes the method call but an alternative way (1) to handle Promise Reject case
$http(mdnAPI) .get(payload) .then(callback.success, callback.error);// Executes the method call but an alternative way (2) to handle Promise Reject case
$http(mdnAPI) .get(payload) .then(callback.success).then(undefined, callback.error);

使用XHR加载图像

另一个用了Promise和XMLHttpRequest加载一个图像的例子可在MDN GitHub promise-test 中找到。你也可以在github promise-test上看到。每一步都有注释可以让你详细的跟随了解Promise和XHR架构。

ECMAScript 2015（ES6）规范中的promise相关推荐

ECMAScript 2015 ES6
锋利的ES6(持续更新中-) ES6简介: ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.所以又称ECMAScript 20 ...
查看这些有用的ECMAScript 2015（ES6）提示和技巧
by rajaraodv 通过rajaraodv 查看这些有用的ECMAScript 2015(ES6)提示和技巧 (Check out these useful ECMAScript 2015 (E ...
【JavaScript 教程】ES6 中的 Promise对象详解
[JavaScript 教程]ES6 中的 Promise对象详解 1.Promise对象含义 promise是异步编程的一种解决方法. 所谓promise,简单说是一个容器,里面保存着某个未来才会 ...
ES6中的Promise
ES6中的Promise JavaScript本身是单线程语言,这在Node.js学习中已经反复强调过,因为单线程,就需要在程序进行IO操作时做"异步执行",比如最典型的网络操作- ...
es6 --- 手写一个promise
一个promise实例: var getJSON = function(url) {var promise = new Promise(function(resolve, reject) {// XH ...
JavaScript异步编程【中】 -- Promise 详细解析
文章内容输出来源:拉勾教育大前端高薪训练营前言在ES6中,新增加了一种异步编程的解决方案Promise,它是一种规范,是一套处理JavaScript异步的机制. Promise的含义简单来说, ...
大白话讲解Promise（三）搞懂jquery中的Promise
前两篇我们讲了ES6中的Promise以及Promise/A+规范,在Promise的知识体系中,jquery当然是必不可少的一环,所以本篇就来讲讲jquery中的Promise,也就是我们所知道的D ...
浅析JaveScript中的Promise对象暮雨清秋
前言本文旨在简单讲解一下javascript中的Promise对象的概念,特性与简单的使用方法.并在文末会附上一份符合PromiseA+规范的Promise对象的完整实现. 注:本文中的相关概念均基 ...
前端工程师，Es6面试题？promise概念？
1.什么是 es6? 是 ECMAScript 的第六个版本在 es5 的基础上新增加了一些语法 js 分成三部分 dom(文档对象模型) bom(浏览器对象模型) ECMAScript(js 语法 ...

ECMAScript 2015（ES6）规范中的promise