1.Promise对象方法
(1)Promise.all(iterable);
Promise.all方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
参数:一个可迭代对象,例如一个Array
像这样:
var p = Promise.all([p1, p2, p3]);
p的状态由p1、p2、p3决定,分成两种情况。
(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
let p1 = Promise.resolve(3);
let p2 = 1337;
let p3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, "foo");
});
Promise.all([p1, p2, p3]).then(values => {
console.log(values);
// [3, 1337, "foo"]
});
- 如果iterable包含非promise值,则它们将被忽略,但仍然计入返回的promise数组值(如果promise已满足):
var p1 = Promise.all([1,2,3]);
var p2 = Promise.all([1,2,3, Promise.resolve(444)]);
var p3 = Promise.all([1,2,3, Promise.reject(555)]);
//setTimeout运行机制,等到当前脚本的同步任务和“任务队列”中已有的事件,全部处理完以后,执行setTimeout指定的任务。
setTimeout(function(){
console.log(p1);
console.log(p2);
console.log(p3);
});
//结果:
//[Log] Promise {status: "resolved", result: [1, 2, 3]}
//[Log] Promise {status: "resolved", result: [1, 2, 3, 444]}
//[Log] Promise {status: "rejected", result: 555}
- Promise.all的异步性和同步性
如果参数不为空(异步)
var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
var p = Promise.all(resolvedPromisesArray);
console.log(p);
setTimeout(function(){
console.log('the stack is now empty');
console.log(p);
});
// 结果:
// Promise { <state>: "pending" }
// the stack is now empty
// Promise { <state>: "fulfilled", <value>: Array[2] }
如果参数为空(同步)
var p=Promise.all([]);
console.log(p); //Promise {status: "resolved", result: []}
- Promise.all 一旦reject立即返回
var p1 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, 'one');
});
var p2 = new Promise((resolve, reject) => {
setTimeout(resolve, 2000, 'two');
});
var p3 = new Promise((resolve, reject) => {
reject('reject');
});
Promise.all([p1, p2, p3).then(values => {
console.log(values);
}, reason => {
console.log(reason)
});
//From console:
//"reject"
- 如果作为参数的 Promise 实例是catch()后产生的,返回的还是resolved状态的Promise,这个我们参照then方法的返回值,因为catch()也是then方法的特例
var p1 = new Promise((resolve, reject) => {
resolve('我是对的');
})
.then(result => result)
.catch(e => e);
var p2 = new Promise((resolve, reject) => {
throw new Error('报错了');
})
.then(result => result)
.catch(e => e); //本质上返回的还是resolved状态的Promise
Promise.all([p1, p2])
.then(result => console.log(result)) //执行这个
.catch(e => console.log(e));
结果:
["我是对的", Error: 报错了] (2)
到这里,我们终于讲完了all()方法,我们趁热打铁,写一个同步请求数据,异步处理的例子
// 请求1
function rq1 () {
var promise = new Promise(function(resolve,reject){
$.ajax({
url:"XXX",
type:"POST",
data:{
id:'20151002262'
},
success:function(msg){
resolve(msg)
}
})
})
return promise;
}
// 请求2
function rq2 () {
var promise = new Promise(function(resolve,reject){
$.ajax({
url:"XXX",
type:"POST",
data:{
score:'666'
},
success:function(msg){
resolve(msg)
}
})
})
return promise;
}
Promise.all([rq1(),rq2 () ])
.then(function(res){
console.log(res);
})
(2)Promise.race(iterable);
Promise.race方法同样是将多个Promise实例,包装成一个新的Promise实例。
var p = Promise.race([p1, p2, p3]);
不同的是,只要p1, p2, p3中任意一个实例率先改变状态,则p的状态就跟着改变,而且状态由率先改变的实例决定。
描述:
race 函数返回一个 Promise,它将与第一个传递的 promise 相同的完成方式被完成。它可以是完成( resolves),也可以是失败(rejects),采用第一个promise的值作为它的值,从而异步地解析或拒绝(一旦堆栈为空)。
如果传的迭代是空的,则返回的 promise 将永远等待。
- Promise.race的异步性
var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
var p = Promise.race(resolvedPromisesArray);
console.log(p);
setTimeout(function(){
console.log('the stack is now empty');
console.log(p);
});
//结果
//[Log] Promise {status: "pending"}
//[Log] the stack is now empty
//[Log] Promise {status: "resolved", result: 33}
(3)Promise.resolve()
Promise.resolve(value)方法返回一个以给定值解析后的Promise对象。但如果这个值是个thenable(即带有then方法),返回的promise会“跟随”这个thenable的对象,采用它的最终状态(指resolved/rejected/pending/settled);否则以该值为成功状态返回promise对象。
- 语法
Promise.resolve(value);
Promise.resolve(promise);
Promise.resolve(thenable)
- 对一个普通值进行resolve,Promise.resolve方法返回一个新的Promise对象,状态为resolve。
Promise.resolve("Success").then(function(value) {
console.log(value); // "Success"
}, function(value) {
// 不会被调用
});
- Resolve另一个promise对象,参数是一个Promise实例,那么Promise.resolve将不做任何处理,直接返回这个实例。
var original = Promise.resolve("patty");
var cast = Promise.resolve(original);
cast.then(function(v) {
console.log(v); // true
});
- resolve thenable的对象们,参数是一个thenable对象,也就是说对象是具有then方法的对象
// 1.Resolve一个thenable对象
var p1 = Promise.resolve({
then: function(onFulfill, onReject) { onFulfill("fulfilled!"); }
});
console.log(p1 instanceof Promise) // true, 这是一个Promise对象
p1.then(function(v) {
console.log(v); // 输出"fulfilled!"
}, function(e) {
// 不会被调用
});
// 2.Thenable在callback之前抛出异常
// Promise rejects
var thenable = { then: function(resolve) {
throw new TypeError("Throwing");
resolve("Resolving");
}};
var p2 = Promise.resolve(thenable);
p2.then(function(v) {
// 不会被调用
}, function(e) {
console.log(e); // TypeError: Throwing
});
// 3.Thenable在callback之后抛出异常
// Promise resolves
var thenable = { then: function(resolve) {
resolve("Resolving");
throw new TypeError("Throwing");
}};
var p3 = Promise.resolve(thenable);
p3.then(function(v) {
console.log(v); // 输出"Resolving"
}, function(e) {
// 不会被调用
});
(4)Promise.reject()
Promise.reject(reason)方法返回一个用reason拒绝的Promise。reason如果是Promise,依然作为回调函数参数返回。
语法
Promise.reject(reason);
静态函数Promise.reject返回一个被拒绝的Promise。使用是Error实例的reason对调试和选择性错误捕捉很有帮助。
Promise.reject("Testing static reject").then(function(reason) {
// 未被调用
}, function(reason) {
console.log(reason); // "测试静态拒绝"
});
Promise.reject(new Error("fail")).then(function(error) {
// 未被调用
}, function(error) {
console.log(error); // 堆栈跟踪
});
2.Promise对象的两个实用方法
下面将要实现的两种方法在ES6中并未标准化,但是实现并不是很难
(1)Promise.prototype.done(onFulfilled, onRejected)
上一次讲到Promise对象的回调链,不管以then方法或者catch方法结尾,要是最后一个方法抛出错误,都有可能无法捕捉到,因为Promise内部的错误不会冒泡到全局,因此,我们可以提供一个done方法,总是处理回调链的尾端,保证抛出任何可能出现的错误。
我们一起来看看done()的实现
Promise.prototype.done = function (resolve, reject) {
this.then(resolve, reject)
.catch( function (reason) {
// 抛出一个全局错误
setTimeout( () => { throw reason }, 0);
});
}
// 使用示例
var p = new Promise( (resolve, reject) => {
resolve('p');
});
p.then(ret => {
console.log(ret);
return 'then1';
}).catch( err => {
console.log(err.toString());
}).then( ret => {
console.log(ret);
return 'then2';
}).then( ret => {
console.log(ret);
x + 2;
}).done();
运行结果:
这是Promise官方API实现的done()
(2)Promise.prototype.finally(onResolved)
finally方法用于指定不管Promise对象最后的状态如何,都会执行的操作,它与done方法最大的区别就是,它接受一个普通函数作为参数,该函数不管怎么样都必须执行。
Promise.prototype.finally = function (callback) {
let P = this.constructor;
return this.then(
ret => P.resolve(callback()).then( () => ret),
err => P.resolve(callback()).then( () => {throw reason })
);
};
到这里,Promise的方法终于讲完了!!!
3.Promise的优劣势
从上面几个小节综合来看,可以看到Promise其实就是做了一件事情,那就是对异步操作进行了封装,然后可以将异步操作以同步的流程表达出来,避免了层层嵌套的回调函数,同时提供统一的接口,使得控制异步操作更加容易。
但是,Promise也有一些缺点:
- 无法取消Promise,一旦新建它就会立即执行,无法中途取消。
- 如果不设置回调函数,Promise内部的错误不会反应到外部。
- 当处于未完成态时,无法得知目前进展到哪一个阶段。
4. Promise与generator的结合
Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。使用Generator函数来管理流程,遇到异步操作的时候,通常返回一个Promise对象。