Promise 是异步编程的一种解决方案,主要解决了异步回调嵌套写法的问题,还提供了统一的接口,使得控制异步操作更加容易。
function asyncFn(){ return new Promise(function(resove, reject){ /*setTimeout(function(){ resove('async function'); },100);*/ reject(new Error('error test')) //同一时间promise状态是单一的,要么是reject,要么是resove resove('async function'); //不会执行 });}//Promise 新建后就会立即执行。var promise = new Promise(function(resolve, reject) { console.log('Promise'); //立即执行 resolve();});promise.then(function() { console.log('Resolved.');});console.log('Hi!');// Promise// Hi!// Resolved//异步加载图片的例子。function loadImageAsync(url) { return new Promise(function(resolve, reject) { var image = new Image(); image.onload = function() { resolve(image); }; image.onerror = function() { reject(new Error('Could not load image at ' + url)); }; image.src = url; });}//resolve函数的参数除了正常的值以外,还可能是另一个 Promise 实例,比如像下面这样var p1 = new Promise(function (resolve, reject) { // ...});var p2 = new Promise(function (resolve, reject) { // ... resolve(p1);})//这时p1的状态就会传递给p2,也就是说,p1的状态决定了p2的状态。如果p1的状态是Pending,那么p2的回调函数就会等待p1的状态改变;如果p1的状态已经是Resolved或者Rejected,那么p2的回调函数将会立刻执行。//一般来说,调用resolve或reject以后,Promise 的使命就完成了,后继操作应该放到then方法里面,而不应该直接写在resolve或reject的后面。所以,最好在它们前面加上return语句new Promise((resolve, reject) => { return resolve(1);// 后面的语句不会执行console.log(2);})//Promise 实例具有then方法,它的作用是为 Promise 实例添加状态改变时的回调函数,then方法返回的是一个新的Promise实例getJSON("/posts.json").then(function(json) { return json.post;}).then(function(post) { // ...});//上面的代码使用then方法,依次指定了两个回调函数。第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。第二个回调函数会等待第一个回调函数执行完根据返回新的promise对象状态执行相应的步骤asyncFn().then(function(value){ console.log(value);}).catch(function(error){ //一般说来,使用.catch来将resolve和reject处理分开来写是比较推荐的做法 console.log(error)})//.catch 等价 promise.then(undefined, onRejected)/*asyncFn().then(function(value){ console.log(value);}, function(error){ console.log(error)})*//*new Promise(function(resove, reject){ resove(123);})*/Promise.resolve(132).then(function(value){ console.log(value) //即使在调用 promise.then 注册回调函数的时候promise对象已经是确定的状态,Promise也会以异步的方式调用该回调函数})//Promise.resolve静态方法除了是快捷方式外,还可以把thenable对象转换为promise对象Promise.reject(new Error('error test2')).catch(function(error){ console.log(error);})//Promise.reject()方法的参数,会原封不动地作为reject的理由,变成后续方法的参数。这一点与Promise.resolve方法不一致。//Promise保证了每次调用都是以异步方式进行的//Promise#then 不仅仅是注册一个回调函数那么简单,它还会将回调函数的返回值进行变换,创建并返回一个promise对象。//实际上 Promise#catch 只是 promise.then(undefined, onRejected); 方法的一个别名而已//在IE8及以下版本基于ECMAScript 3实现的,在ECMAScript 3中保留字是不能作为对象的属性名使用的(点标记法(dot notation) 要求对象的属性必须是有效的标识符),因此不能将 catch 作为属性来使用,也就不能编写类似 promise.catch() 的代码,因此就出现了 identifier not found 这种语法错误了//而现在的浏览器都是基于ECMAScript 5的,而在ECMAScript 5中保留字都属于 IdentifierName ,也可以作为属性名使用了//但是使用 中括号标记法(bracket notation)的话,则可以将非合法标识符作为对象的属性名使用var promise = Promise.reject(new Error("message")); //reject方法的作用,等同于抛出错误promise["catch"](function (error) { console.error(error);}); //或者我们不单纯的使用 catch ,而是使用 then 也是可以避免这个问题的//次调用then都会返回一个新创建的promise对象//Promise.all 接收一个 promise对象的数组作为参数,当这个数组里的所有promise对象全部变为resolve或reject状态的时候,它才会去调用 .then 方法, 调用then方法values状态值也是一个数组//传递给 Promise.all 的promise并不是一个个的顺序执行的,而是同时开始、并行执行的。// `delay`毫秒后执行resolvefunction timerPromisefy(delay) { return new Promise(function (resolve) { setTimeout(function () { resolve(delay); }, delay); });}var startDate = Date.now();// 所有promise变为resolve后程序退出Promise.all([ timerPromisefy(1), timerPromisefy(32), timerPromisefy(64), timerPromisefy(128) ]).then(function (values) { console.log(Date.now() - startDate + 'ms'); // 約128ms console.log(values); // [1,32,64,128] 状态值 });var p = Promise.all([p1, p2, p3]);//只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。//只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。//如果作为参数的 Promise 实例,自己定义了catch方法,那么它一旦被rejected,并不会触发Promise.all()的catch方法。,因为自己定义了catch方法会返回新的promise对象,也会变成resolved//Promise.race 只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话,就会继续进行后面的then或catch处理。var p = Promise.race([p1, p2, p3]);//只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数//Promise.race方法的参数与Promise.all方法一样,如果不是 Promise 实例,就会先调用Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。const p = Promise.race([ fetch('/resource-that-may-take-a-while'), new Promise(function (resolve, reject) { setTimeout(() => reject(new Error('request timeout')), 5000) })]);p.then(response => console.log(response));p.catch(error => console.log(error));//上面代码中,如果5秒之内fetch方法无法返回结果,变量p的状态就会变为rejected,从而触发catch方法指定的回调函数。//需要注意的是,立即resolve的Promise对象,是在本轮“事件循环”(event loop)的结束时,而不是在下一轮“事件循环”的开始时。var winnerPromise = new Promise(function (resolve, reject) { setTimeout(function () { console.log('this is winner log'); //reject(new Error('this is winner error')); resolve('this is winner'); }, 4);});var loserPromise = new Promise(function (resolve, reject) { setTimeout(function () { console.log('this is loser log'); reject(new Error('this is loser error')); // resolve('this is loser'); }, 1000);});// 第一个promise变为resolve后程序停止Promise.race([winnerPromise, loserPromise]).then(function (value) { console.log(value); // => 'this is winner'}).catch(function(error){ console.log('error:'+error) });// Promise.race 在第一个promise对象变为Fulfilled或Rejected之后,并不会取消其他promise对象的执行,但是其他promise对象执行后不会触发then或catch。// then or catch?// .catch 也可以理解为 promise.then(undefined, onRejected)//Promise.resolve(42).then(throwError, onRejected); 有异常发生onRejected不会被调用//Promise.resolve(42).then(throwError).catch(onRejected); 有异常发生时onRejected会被调用//.then 方法中的onRejected参数所指定的回调函数,实际上针对的是其promise对象或者之前的promise对象,而不是针对 .then 方法里面指定的第一个参数,即onFulfilled所指向的对象,这也是 then 和 catch 表现不同的原因。//Deferred 拥有 Promise//Deferred 具备对 Promise的状态进行操作的特权方法function Deferred() { this.promise = new Promise(function (resolve, reject) { this._resolve = resolve; this._reject = reject; }.bind(this));}Deferred.prototype.resolve = function (value) { this._resolve.call(this.promise, value);};Deferred.prototype.reject = function (reason) { this._reject.call(this.promise, reason);};//Promise一般都会在构造函数中编写主要处理逻辑,对 resolve、reject 方法的调用时机也基本是很确定的。new Promise(function (resolve, reject){ // 在这里进行promise对象的状态确定});//Deferred的话,并不需要将处理逻辑写成一大块代码,只需要先创建deferred对象,可以在任何时机对 resolve、reject 方法进行调用。var deferred = new Deferred();// 可以在随意的时机对 `resolve`、`reject` 方法进行调用//Promise对象的回调链,不管以then方法或catch方法结尾,要是最后一个方法抛出错误,都有可能无法捕捉到(因为Promise内部的错误不会冒泡到全局)。因此,我们可以提供一个done方法,总是处于回调链的尾端,保证抛出任何可能出现的错误。Promise.prototype.done = function (onFulfilled, onRejected) { this.then(onFulfilled, onRejected) .catch(function (reason) { // 抛出一个全局错误 setTimeout(() => { throw reason }, 0); });};//不管怎样,done都会捕捉到任何可能出现的错误,并向全局抛出。//finally方法用于指定不管Promise对象最后状态如何,都会执行的操作。它与done方法的最大区别,它接受一个普通的回调函数作为参数,该函数不管怎样都必须执行。Promise.prototype.finally = function (callback) { let P = this.constructor; return this.then( value => P.resolve(callback()).then(() => value), reason => P.resolve(callback()).then(() => { throw reason }) );};//不管前面的Promise是fulfilled还是rejected,都会执行回调函数callback//经常遇到一种情况:不知道或者不想区分,函数f是同步函数还是异步操作,但是想用 Promise 来处理它。因为这样就可以不管f是否包含异步操作,都用then方法指定下一步流程,用catch方法处理f抛出的错误Promise.try(database.users.get({id: userId})) .then(...).catch(...)
//目前只是提案
参考文档:
http://liubin.org/promises-book/
https://github.com/ruanyf/es6tutorial/blob/gh-pages/docs/promise.md