Promise模式——Javascript异步操作潮流

对读书学知识感兴趣的同学，可以关注一下我业余时间做的公众号“精粹微阅读”（搜索微信号"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的用法。

functionloadImageAsync(url) {

    returnnewPromise(function(resolve, reject) {

        varimage =newImage();

        image.onload =function() {

            resolve(image);

        };

        image.onerror =function() {

            reject(newError('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多多交流～

---

什么都懂一点，生活才多彩些。这是一个带你读书学知识的公众号～