ES6‘s Promise 初探

作者 johansen 日期 2017-03-30
技术小记
ES6‘s Promise 初探

节前焦虑症，又来了。话说得静下心来看看书，调节一下心性。这周博客继续学习ES6,相关技术点就是Promise。

回顾

首先在介绍promise之前回顾一下异步回调，异步回调是最直接的异步结果处理模式，将一个回调函数 callback 扔进异步处理函数中，当异步处理获得结果之后再调用这个回调函数就可以继续之后的处理。
但是若最后callback又是异步回调怎么办,回调多层嵌套，对于代码的维护性是一个很坏的结果。怎么解决这些问题。如今的JS对于处理异步调用已经有了很多成熟的方案（co、async、Q 、es6原生promise、then.js、bluebird）。今天单独就promise谈一谈。

Promise

Promise是一个对象，它是用来实现异步操作的，它可以让异步代码书写起来更优雅，更便于阅读。

Promise的特性：

  • 1、Promise对象有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败），只有异步操作结果可以改变当前状态，其他操作不能改变状态，Promise对象的状态只能从“进行中”改为“已完成”或者从“进行中”改为“失败”。

  • 2、Promise对象的then方法，就是用来指定回调函数。一旦非同步操作完成，就调用指定的回调函数，并总是返回一个promise对象，方便链式调用。而且同一个promise的then可以调用多次。

  • 3、then方法接受两个回调函数作为参数，第一个参数是成功Resolved时的回调，第二个是失败Reject时的回调。第二个参数是可以选的，同时，then可以接受另一个promise传入，也接受一个“类then”的对象或方法，即thenable对象。

综上特性,我们举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve('test');
        }, time);
    })
};
(function(){
    console.log('start');
    sleep(3000)
    .then(function(data){
        console.log(data);
        return sleep(5000);})
    .then(function(data){
        console.log(data);
        console.log('end');
    })
})();

上面代码中，sleep方法返回一个Promise实例，表示一段时间以后才会发生的结果。首先输出‘start’,然后，sleep执行后，3秒后返回“test”，触发then方法绑定的回调函数，输出回调返回值“test”,又return sleep(5000),这样第一个then的返回值，就是第二个的参数，再次执行sleep，5秒后返回‘test’，输出‘test’、’end’。

这个例子让我们初步认识了promise的基本实现。下周我们将对其具体的api进行分析。后天踏青，洗洗睡了，养足体力哈。

FEATURED TAGS
技术小记