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的用法。

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多多交流~






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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值