1.Promise的含义:
Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise
对象。
所谓Promise
,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。
Promise
对象有以下两个特点。
(1)对象的状态不受外界影响。Promise
对象代表一个异步操作,有三种状态:Pending
(进行中)、Resolved
(已完成,又称Fulfilled)和Rejected
(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise
这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise
对象的状态改变,只有两种可能:从Pending
变为Resolved
和从Pending
变为Rejected
。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对Promise
对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
2.Promise的基本实现
var promiseCount=0;
function testPromise(){
var thisPromiseCount = ++promiseCount;
var p=new Promise(function(resolve, reject){
//resolve成功 reject失败
setTimeout(function(){
if(thisPromiseCount<2){
resolve(thisPromiseCount);
}else{
reject(thisPromiseCount)
}
},Math.random()*2000+1000);
}); p.then(function(val){
console.log("end: "+val+" Promise被满足了(异步代码结束)");
return 'success';
},function(error){
console.error('error:'+error+"Promise失败(异步代码结束)");
return 'error'
}).then(function(val){
console.log(val);
})
} testPromise();
上面是一个简单的Promise的基本实现。Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。resolve表示成功后执行的方法,reject是失败后执行的方法;new Promise会生成一实例,实例生成后,可以用then方法分别指定Resolved状态和Reject状态的回调函数。then有两个回调函数,第一个是成功后的回调,第二个是失败后的回调。
3. Promise.prototype.then
then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。第一个参数是resolved的回调函数,第二个是可选的,rejected回调函数
var getJSON = function(url) {
var promise = new Promise(function(resolve, reject){
var client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send(); function handler() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
}); return promise;
};
getJSON("/post/1.json").then(function(post) {
return getJSON(post.commentURL);
}).then(function funcA(comments) {
console.log("Resolved: ", comments);
}, function funcB(err){
console.log("Rejected: ", err);
});
上面的代码使用then方法,依次指定了两个回调函数。第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。
4. Promise.prototype.all
Promise.all方法用于将多个Promise实例,包装成一个新的Promise实例。
数组或者可以不是数组,但必须具有Iterator接口,且返回的每个成员都是Promise实例。
(1)只有proList的状态都变成fulfilled,p的状态才会变成fulfilled,此时proList的返回值组成一个数组,传递给p的回调函数。
(2)只要proList之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
ar arr=[1,2,3];
function getPro(a){
return new Promise(function(resolve,reject){
if(a>2){
reject(a);
}
resolve(a)
})
}
var proList=arr.map(function(id){
return getPro(id);
}); Promise.all(proList).then(function(val){
console.log(val);
}).catch(function(e){
console.log('error:'+e);
});
上面的例子是一个简单的promise.all的实现,prolist里面的三个promise实例,如果三个都返回resolve,那么就会走第一个then里面的方法,如果有一个返回reject,那么久会走到最后的catch方法;
4.Promise.prototype.race
Promise.race(),参数跟Promise.all参数一样,
下面例子只要p1、p2之中有一个实例率先改变状态,p3的状态就跟着改变。那个率先改变的Promise实例的返回值,就传递给p3的回调函数。p3的回调是看率先改变状态p1或者p2的promise里面的函数resolve还是reject,
如果率先改变状态的promise是reject,那么就会走catch回调,反之会走then的第一个回调方法;
var p1=new Promise(function(resolve,reject){
setTimeout(function(){
console.log(p1);
resolve('p1:=>success');
},Math.random()*1000)
});
var p2=new Promise(function(resolve,reject){
setTimeout(function(){
console.log(p2);
reject('p2:=>error');
},Math.random()*1000)
}); var p3=Promise.race([p1,p2]).then(function(data){
console.log(p3);
console.log(data);
}).catch(function(error){
console.log(p3);
console.log(error);
});
5.Promise.prototype.catch
catch捕获错误 会捕获所有catch上面的所有then方法里面的错误;
/**
* 由于没有指定使用try...catch语句,就冒泡到最外层,成了未捕获的错误。用catch捕获不了,这个错误是在Promise函数体外抛出的。
* @type {Promise}
*/
var promise = new Promise(function (resolve, reject) {
resolve("ok");
setTimeout(function () {
throw new Error('test')
}, 0)
});
promise.then(function (value) {
console.log(value)
}).catch(function (e) {
console.log(e);
}); /**
* 需要注意的是,catch方法返回的还是一个Promise对象,因此后面还可以接着调用then方法。
* @returns {Promise}
*/
var someAsyncThing = function () {
return new Promise(function (resolve, reject) {
// 下面一行会报错,因为x没有声明
resolve(x + 2);
});
}; someAsyncThing()
.catch(function (error) {
console.log('oh no', error);
})
.then(function () {
console.log('carry on');
});
6.Promise.prototype.resolve和Promis.prototype.reject;
有时需要将现有对象转为Promise对象,Promise.resolve方法就起到这个作用, Promise.resolve()有以下三种使用情节,promise.reject跟promise.resolve使用方法一样;
/**
*例如下面p1等价于p2
* @type {Promise.<string>}
*/
var p1=Promise.resolve('foo');
var p2=new Promise(function(resolve,reject){
resolve('foo');
});
p1.then(function(data){
console.log(data); //foo
}); /**
*没有参数的时候,回掉函数也没有参数
* @type {Promise.<string>}
*/
var p3=Promise.resolve();
p3.then(function(){
console.log('resolve无参数!');
}); /**
* 当一个对象有then这个参数的时候;
* @type {Promise.<string>}
*/
var enable={
then:function(resolve,reject){
resolve(50);
}
};
var p4=Promise.resolve(enable);
p4.then(function(s){
console.log(s);
});
参考网址:http://es6.ruanyifeng.com/#docs/promise
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise