对读书学知识感兴趣的同学,可以关注一下我业余时间做的公众号“精粹微阅读”(搜索微信号"jcwyd2016"或者直接搜索公众号名字),和读书有关的,更新经济、政治、运动、法律、设计、沟通、管理等等各个方面的书籍知识总结~感兴趣的同学欢迎来看一下哟~
一、Javascript中的异步
在Javascript中,经常需要使用异步操作。一般的异步实现方法有三种,包括:
使用回调函数
事件监听
发布/订阅模式
这三种实现异步的方法很常用,但是都存在一些问题。例如,使用回调函数方法实现异步时,如果存在多个需要异步的操作,会导致代码特别混乱,维护困难。
Promise是一种全新的实现异步的方式。最开始在社区首先出现Promise模式,后来被一些主流浏览器支持原生对象,现在已经是ES6的标准了。也就是说,现在可以使用ES6的语言,使用原生Promise对象,来实现异步了。
二、Promise的原理
所谓 Promise,就是一个对象,用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理。
Promise 对象有以下两个特点。
1.对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和 Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来,它的英语意思就是「承诺」,表示其他手段无法改变。
2.一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。
三、如何在ES6中使用Promise
ES6种提供了内置的Promise对象,帮助我们实现Promise模式。接下来,直接通过一个示例代码来学习Promise的用法。
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;
});
}
这是一个用Promise对象编写的异步加载图片的例子。这段代码的功能是:异步加载图片,当图片加载成功时,为图片指定src属性,如果图片加载失败,就抛出异常。
首先,要想让一个方法能够称为Promise模式的,需要让它返回一个Promise对象,这样方便后面的链式调用。上面的代码中,就返回一个新建的Promise对象。Promise对象的初始化需要传入一个回调函数,这个回调函数有两个函数参数:resolve表示将状态从等待变为完成,reject表示将状态从等待变为失败。这两个函数是Promise对象内置的函数,不需要我们定义,只要调用就可以了。
接下来,进行图片的异步加载。当通过image.onload进行监听,如果图片成功加载,就调用resolve()方法,将状态变为完成态。如果监听到error,就调用reject()方法,将状态变为终止态。
方法定义完了,如何调用呢?每一个Promise对象都有一个then方法,then方法传入两个函数,第一个函数当状态由等待变为完成时执行(也就是调用了resolve()方法之后执行),第二个函数当状态由等待变为终止时执行(也就是调用了reject()方法之后执行)。第二个函数参数可以省略。也就是说,不论Promise的状态变成什么样,我们都能通过then()方法捕获它,并进行不同的处理,从而达到异步的效果。
上面介绍的只是Promise模式的皮毛,后续还会对Promise对象进行更深入的学习。灵活运用Promise,能够很大提升我们js代码的性能。感兴趣的同学可以加我的qq号:3365250280多多交流~
什么都懂一点,生活才多彩些。这是一个带你读书学知识的公众号~