【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 codeif (/*异步操作成功*/){resolve(value);} elsereject(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;});
}

查看更多ES6教学文章：

1. 【ES6】let与const 详解
2. 【ES6】变量的解构赋值
3. 【ES6】字符串的拓展
4. 【ES6】正则表达式的拓展
5. 【ES6】数值的拓展
6. 【ES6】数组的拓展
7. 【ES6】函数的拓展
8. 【ES6】对象的拓展
9. 【ES6】JS第7种数据类型：Symbol
10. 【ES6】Proxy对象
11. 【ES6】JS的Set和Map数据结构
12. 【ES6】Generator函数详解
13. 【ES6】Promise对象详解
14. 【ES6】异步操作和async函数
15. 【ES6】JS类的用法class
16. 【ES6】Module模块详解
17. 【ES6】ES6编程规范编程风格

参考文献

阮一峰《ES6标准入门（第2版）》