【ES6】Promise对象详解

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

查看更多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版)》

你可能感兴趣的:(ES6系列-完整笔记)