ES6中的Promise对象

什么是 Promise :
简单说Promise 就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. 从语法上说,Promise是一个对象,从他可以获取异步操作的消息.
Promise 是异步编程的一种解决方案,比传统的解决方案–回调函数和事件–更合理和更强大.
Promise 对象有两个特点:

1. 对象的状态不受外界影响. Promise 对象代表一个异步操作,有三种状态: pending(进行中),fulfilled(已成功)和rejected(已失败). 只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态.
2. 一旦状态改变,就不会再变,任何时候都可以得到这个结果. Promise 对象的状态改变,只有两种可能: 从 pending变为 fulfilled和从 pending 变为reject . 只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为resolved(已定型). 如果改变已经发生,你再对Promise 对象添加回调函数,也会立即得到这个结果. 这与事件完全不同,事件的特点是.如果你错过了他,再去监听,是得不到结果的.
   有了Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数,此外,Promise 对象提供统一的接口,使得控制异步操作更加容易.
   **缺点:**首先无法取消Promise,一旦新建它就会立即执行,无法中途取消.其次,如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部. 第三,当 pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)

基本用法:
ES6规定, Promise 对象是一个构造函数,用来生成Promise实例.
下面是一个 Promise 实例:

const promise = new Promise(function (resolve,reject) {
	// ... some code
	if(/*异步操作成功*/){
		resolve(value);
	}else {
		reject(error);
	}
})

Promise 构造函数接受一个函数作为参数,该函数的两个参数分别是 resolve 和 reject . 他们是两个函数,由js 引擎提供,不用自己部署.
resolve 函数的作用是,将 Promise 对象的状态从 ‘未完成’变为’成功’(即从pending变成resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去; reject 函数的作用是,将Promise 对象的状态从’未完成’变为’失败’(即从pending变为rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去.

Promise 实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数.

promise.then(function(value) {
	//success
},  function(error) {
	//failure
})

then 方法可以接受两个回调函数作为参数. 第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象状态变为rejected时调用. 其中第二个函数是可选的,不一定提供. 这两个函数都接受Promise对象传出的值作为参数.

下面介绍一个Promise对象的简单例子:

function timeout(ms) {
	return new Promise((resolve,reject) => {
		setTimeout(resolve,ms,'done');
	});
}
timeout(100).then ((value) => {
	console.log(value);
})

上面代码中,timout方法返回一个Promise实例,表示一段时间以后才会发生的结果.过了特定的时间(ms参数)以后,Promise实例的状态变为resolved,就会触发then方法绑定的回调函数.

Promise 新建后就会立即执行:

let promise = new Promise(function(resolve,reject) {
	console.log('Promise');
	resolve();
});
promise.then(function() {
	console.log('resolved.');
});
console.log('Hi!');

//Promise
//Hi
//resolved.

上面代码中,Promise新建后立即执行,所以首先输出的是 Promise,然后,then 方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以resolved最后输出.

下面是异步加载图片的例子:
function loadImageAsync(url) {
return new Promise(function (resolve,reject) {
const image = new Image();
image.onload = function() {
reject(new Error(‘Could not load image at’ + url));
};
image.src = url;
})
}
上面代码中,使用Promise 包装了一个图片加载的异步操作.如果加载成功,就调用resolve方法,否则就调用reject方法.

下面是一个用 Promise 对象实现的Ajax操作的例子:

const getJSON = function(url) {
	const promise = new Promise(function(resolve,reject) {
		const handler = function() {
			if(this.readyState !== 4) {
				return;
			}
			if(this.status === 200) {
				resolve(this.response);
			}else{
				reject(new Error(this.statusText));
			}
		};
		const client = new XMLHTTPRequest();
		client.open("GET",url);
		client.onreadystatechange = handler;
		client.responseType = "json";
		client.setRequestHeader("Accept","application/json");
		client.send();
	});
	return promise;
};
getJSON("/posts.json").then(function(json) {
	console.log("Contents" + json);
},  function(error) {
    console.log("出错了",error);
});

上面代码中,getJSON是对 XMLHTTPRequest 对象的封装,用于发出一个针对JSON数据的HTTP请求,并且返回一个Promise对象. 需要注意的是,在getJSON内部,resolve函数和reject函数调用时,都带有参数.

注意,调用resolve或reject 并不会终结Promise的参数函数的执行.

new Promise((resolve,reject) => {
	resolve(1);
	console.log(2);
}).then(r => {
	console.log(r);
});
//2
//1

上面代码中,调用resolve(1)之后,后面的console.log(2)还是会执行,并且会首先打印出来.这是因为立即resolved的Promise是在本轮事件循环的末尾执行,总是晚于本轮循环的同步任务.

一般来说,调用resolve 或reject 以后,Promise的使命就完成了,后继操作应该放到then方法里面,而不应该直接写在resolve或reject 的后面.所以,最好在他们前面加上return 语句,这样就不会有意外.

new Promise((resolve,reject) => {
	return resolve(1);
	//后面的语句不会执行
	console.log(2);
})

Promise.prototype.then()
它的作用是为Promise实例添加状态改变时的回调函数.
前面说过,then方法的第一个参数是resolve状态的回调函数,第二个参数(可选)是rejected状态的回调函数.
then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例).因此可以采用链式写法,即then方法后面再调用另一个then方法.

getJSON("posts.json").then(function(json) {
	return json.post;
}).then(function(posts) {
	// ...
})

上面的代码使用then 方法,依次指定了两个回调函数.第一个回调函数完成以后,会将返回的结果作为参数,传入第二个回调函数.

采用链式的then , 可以指定一组按照次序调用的回调函数. 这时,前一个回调函数,有可能返回的还是一个Promise对象(即有异步操作),这时后一个回调函数,就会等待该Promise对象的状态发生变化,才会被调用.

getJSON("/post/1.json").then(function(post) {
	return getJSON(post.commentURl);
}).then(function funcA(comment) {
	console.log("resolved",comments);
}, function funcB(err){
	console.log('rejected',err);
});

上面代码中,第一个then 方法指定的回调函数,返回的是另一个Promise对象.这时第二个then方法指定的回调函数,就会等待这个新的Promise对象状态发生变化.如果变为resolved,就会调用funcA,如果状态变为rejected,就会调用funcB.
如果采用箭头函数,上面的代码可以写的更简洁.

getJSON("/post/1.json").then(
	post => getJSON(post.commentURl)
).then(
	comments => console.log("resolved", comments),
	err => console.log("rejected",err)
);

Promise.all()
Promise.all 方法用于将多个Promise实例,包装成一个新的Promise实例.

const p = Promise.all([ p1, p2, p3 ]);

上面代码中,Promise.all方法接受一个数组作为参数,p1,p2,p3都是Promise实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为Promise实例.再进一步处理. (Promise.all方法的参数可以不是数组,但必须具有Iterator接口,且返回的每个成员都是Promise实例)
p的状态由p1,p2,p3决定,分成两种情况.

1. 只有p1,p2,p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1,p2,p3的返回值组成一个数组,传递给p的回调函数.
2. 只要p1,p2,p3之中有一个被 rejected, p的状态就变成rejected,此时第一个被rejected的实例的返回值,会传递给p的回调函数.

下面是一个具体的例子:

//生成一个Promise对象的数组
const promises = [2,3,5,7,11,13].map(function (id) {
	return getJSON('/post/' + id + ".json");
});
Promise.all(promises).then(function (posts){
	// ...
}).catch(function(reason){
	// ...
});

上面的代码中,promises是包含6个Promise实例的数组,只有这6个实例的状态都变成fulfilled,或者其中一个变为rejected,才会调用Promise.all方法后面的回调函数.

4. List item