es6的Promise及es7的Async/Await应用

前言

关于Promise 对象，阮一峰大神在Es6入门中写过，这里就不再累赘了！大家可以在本文底部，点击查看Promise 文档。其实Promise 最早是源于社区，jquery的deferred对象，也有类似Promise的实现。我之前在判断文章中所有图片是否加载完成一文中有所提及！今天主要讲讲Promise及Async/Await的一些应用。

简单的停顿执行

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve();
        }, time);
    })
};

var start = async function () {
    console.log('start');
    await sleep(3000);
    console.log('end');
};

start();

上面代码中，控制台先输出start，稍等3秒后，输出了end。

获得返回值

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            // 返回 ‘ok’
            resolve('ok');
        }, time);
    })
};

var start = async function () {
    let result = await sleep(3000);
    console.log(result); // 收到 ‘ok’
};
start()

await等待的虽然是promise对象，但不必写.then(..)，直接可以得到返回值。

捕捉错误

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            // 模拟出错了，返回 ‘error’
            reject('error');
        }, time);
    })
};

var start = async function () {
    try {
        console.log('start');
        await sleep(3000); // 这里得到了一个返回错误

        // 所以以下代码不会被执行了
        console.log('end');
    } catch (err) {
        console.log(err); // 这里捕捉到错误 `error`
    }
};
start()

既然.then(..)不用写了，那么.catch(..)也不用写，可以直接用标准的try catch语法捕捉错误。

循环多个await

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve();
        }, time);
    })
};
var start = async function () {
    for (var i = 1; i <= 10; i++) {
        console.log(`当前是第${i}次等待..`);
        await sleep(1000);
    }
};
start()

会输出：

当前是第1次等待..
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
当前是第2次等待..
当前是第3次等待..
当前是第4次等待..
当前是第5次等待..
当前是第6次等待..
当前是第7次等待..
 当前是第8次等待..
当前是第9次等待..
当前是第10次等待..

每隔1s输出一次。

经典面试题目

我之前提到的setTimeout和for循环结合，假如有如下代码：

for (var i = 0; i < 5; i++) {
    (function(j) {  // j = i
        setTimeout(function() {
            console.log(new Date, j);
        }, 1000);
    })(i);
}

console.log(new Date, i);

如何对其进行改进，让每隔1s输出一个数字，顺序是：0 -> 1 -> 2 -> 3 -> 4 -> 5

不用es6如下写

for (var i = 0; i < 5; i++) {
    (function(j) {
        setTimeout(function() {
            console.log(new Date, j);
        }, 1000 * j);  // 这里修改 0~4 的定时器时间
    })(i);
}

setTimeout(function() { // 这里增加定时器，超时设置为 5 秒
    console.log(new Date, i);
}, 1000 * i);

用Es6的Promise的写法如下：

const tasks = []; // 这里存放异步操作的 Promise
const output = (i) => new Promise((resolve) => {
    setTimeout(() => {
        console.log(new Date, i);
        resolve();
    }, 1000 * i);
});

// 生成全部的异步操作
for (var i = 0; i < 5; i++) {
    tasks.push(output(i));
}

// 异步操作完成之后，输出最后的 i
Promise.all(tasks).then(() => {
    setTimeout(() => {
        console.log(new Date, i);
    }, 1000);
});

用ES7 async和await的写法如下：

const sleep = (timeountMS) => new Promise((resolve) => {
    setTimeout(resolve, timeountMS);
});

(async () => {  // 声明即执行的 async 函数表达式
    for (var i = 0; i < 5; i++) {
        await sleep(1000);
        console.log(new Date, i);
    }

    await sleep(1000);
    console.log(new Date, i);
})();

上面是对es6的Promise及es7的Async/Await的简单应用，关于ES6的Promise，可以查看阮一峰大神的文档：http://es6.ruanyifeng.com/#docs/promise