ES6中Promise学习笔记

前阵子在工作上遇到一个需要做完两个异步请求后的数据,再进行数据处理的事情,因为都没有办法实现,最后在大神同学的帮助下,用Promise解决了,所以系统性地学习一下,并做一下学习笔记

 

1、Promise简介

因为javascript是单线程的,所以很多的事情只能够使用异步的方式去做好,而异步又会出现执行先后顺序,过去使用的是回调的方式来解决这样的问题。

后来出现了Promise的方法,各种各样的第三方库都实现了Promise方法,而到了ES6,官方把Promise制定了标准,官方进行了支持(道听途说的)

 

2、Promise的接口列表:

then 、catch、resolve、reject、all、race

在Promise调用的function中如果处理的结果为正常,则调用resolve函数,如果异常,则调用reject函数。

在function中调用resolve方法时,程序中就会调用then函数,如果调用reject方法时,就会调用catch函数。

参数传递方面需要保持一致就可以了,就像我们注册一个普通的函数一样。

Promise.all会接收一个promise对象数组,等待数组中的promise函数全部执行完成后,才会执行all的.then或者.catch方法。

Promise.race会接收一个promise对象数组,只要数组中有一个promise函数执行完成后,就会执行race的.then或者.catch方法。

 

3、上代码

// `delay`毫秒后执行resolve
function timerPromisefy(delay) {
    return new Promise(function (resolve) {
        setTimeout(function () {
            resolve(delay);
        }, delay);
    });
}
var startDate = Date.now();
// 所有promise变为resolve后程序退出
Promise.all([
    timerPromisefy(1),
    timerPromisefy(32),
    timerPromisefy(64),
    timerPromisefy(128)
]).then(function (values) {
    console.log(Date.now() - startDate + 'ms');
    // 約128ms
    console.log(values);    // [1,32,64,128]
});

// 任何一个promise变为resolve或reject 的话程序就停止运行
Promise.race([
    timerPromisefy(1),
    timerPromisefy(32),
    timerPromisefy(64),
    timerPromisefy(128)
]).then(function (value) {
    console.log(value);    // => 1
});

执行结果:

 

4、参考资料:

廖雪峰 javascript教程-promise 

阮一峰 ECMAScript 6 入门-Promise 对象 

JavaScript Promise迷你书(中文版) 

posted @ 2017-07-29 18:35  ICE_XUE  阅读(267)  评论(0编辑  收藏  举报