Javascript异步流程控制之Promise(3)-ES6原生Promise简介

[kuitos]

Javascript异步流程控制之Promise(3)-ES6原生Promise简介

原文写于 2015-02-28

前面两篇介绍了一些Promise的概念已经在AngularJs中的应用，前面也说过Promise模型已经成为ES6中的一个事实标准。今天在这里就简单介绍下ES6中原生Promise的用法:

Promise Constructor

var promise = new Promise(function(resolve, reject) {
    // 异步处理
    // 处理结束后、调用resolve 或 reject
});

Promise then

promise.then(onFulfilled, onRejected);
// 结合上面的构造函数，我们这样去用
var promise = new Promise(function(resolve, reject) {
    // 用定时器模拟异步处理
    setTimeout(function(){
        resolve("ok");
    },2000);
});
promise.then(function(msg){
    console.log(msg);
});
// 两秒之后打出ok

Promise catch

// 异常捕获，只要then链中有一个被reject或抛出异常就会被catch
promise.then(function(){}).then(function(){}).catch(function(msg){
    console.log(msg);
});

静态方法 Promise.all

// 前几篇说过这是一个非常好用的方法，like this
var p1 = new Promise(function(resolve){
    setTimeout(function(){
        resolve(1);
    },1000);
});
var p2 = new Promise(function(resolve){
    setTimeout(function(){
        resolve(2);
    },2000);
});
var p3 = new Promise(function(resolve){
    setTimeout(function(){
        resolve(3);
    },3000);
});
Promise.all([p1,p2,p3]).then(function(msg){
    console.log(msg); // [1,2,3]
});

// 只有当所有的promise都resolve才会进入then链的success回调，如果有一个reject,就直接进入then链的error callback

静态方法 Promise.race

// 这个方法也很好用，与Promise.all类似，只不过Promise.all是与集关系，Promise.race是或集关系。顾名思义,竞争的promises
var p1 = new Promise(function(resolve){
    setTimeout(function(){
        resolve(1);
    },1000);
});
var p2 = new Promise(function(resolve){
    setTimeout(function(){
        resolve(2);
    },2000);
});

Promise.race([p1,p2]).then(function(msg){
    console.log(msg); // 1
});
// p1先被resolve，所以打印出的就是1

目前高版本的chrome跟firefox均以实现标准的原生Promise，上文中的代码各位均可放到浏览器中一试究竟。
至此，javascript异步流程控制之Promise系列完结，鼓掌!(👏)
更多Promise相关内容请看这里：Promise迷你书