【ES6】Promise对象详解

一、Promise对象的含义
二、Promise对象的用法
三、Promise对象的几个应用【重点】

1、时间延迟函数
2、图片异步加载

查看更多ES6教学文章：
参考文献

引言：ES6新增的Generato、Promise、async都与异步编程有关。这里我们讲述Promise对象。

一、Promise对象的含义

  所谓Promise就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作)，并且这个事件提供统一的 API,可供进一步处理。
  Promise对象有以下两个特点。
1.对象的状态不受外界影响。Promise对象代表一个异步操作，有3种状态: Pending( 进行中)、Resolved (已完成，又称Fulfilled)和Rejected (已失败)。只有异步操作的结果可以决定当前是哪种状态，任何其他操作都无法改变这个状态。这也是“Promise” 这个名字的由来，它在英语中意思就是“承诺”，表示其他手段无法改变。
2.一旦状态改变就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变只有两种可能:从Pending变为Resolved和从Pending变为Rejected。只要其中之一发生，状态就凝固了，不会再变，会一直保持这个结果。就算改变已经发生，再对Promise对象添加回调函数，也会立即得到这个结果。这与事件( Event)完全不同。事件的特点是，如果你错过了它，再去监听是得不到结果的。
  有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。
  Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误不会反应到外部。再者，当处于Pending状态时，无法得知目前进展到哪一个阶段 (刚刚开始还是即将完成)。
  如果某些事件不断地反复发生，一般说来，使用stream模式是比部署Promise更好的选择。

二、Promise对象的用法

ES6规定，Promise 对象是一个构造函数，用来生成Promise实例。下面的代码块2-1创造了一个Promise实例。

/********		代码块2-1		********/
var promise = new Promise(function(resolve, reject) {
	//... some code
	if (/*异步操作成功*/){
		resolve(value);
	} else
		reject(error);
});

  Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。   resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”(即从Pending变为Resolved)，在异步操作成功时调用，并将异步操作的结果作为参数传递出去;
   reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”(即从Pending变为Rejected)，在异步操作失败时调用，并将异步操作报出的错误作为参数传递出去。
  Promise实例生成以后，可以用then方法分别指定Resolved 状态和Rejected状态的回调函数。见代码块2-2。

/********		代码块2-2		********/
promise.then( function(value) {
	// success
}, function(value) {
// failure
});

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

三、Promise对象的几个应用【重点】

1、时间延迟函数

提出背景：我们知道setTimeout()函数可以每隔一段时间循环运行函数体。我们在编程过程中，经常会只需要循环两三次，或者在某个函数段需要停滞几秒，这时再用setTimeout就很麻烦。
应用介绍：以下函数可延迟100ms运行。下面的代码块3-1中，timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果。过了指定的时间(ms参数)以后，Promise 实例的状态变为Resolved, 就会触发then方法绑定的回调函数。

/********		代码块3-1		********/
function timeout(ms) {
	return new Promise((resolve, reject) => {
	setTimeout(resolve, ms, 'done');
});

timeout(100). then((value) => {
	console. log(value);
});

2、图片异步加载

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;
	});
}