用Promise组织程序
发布在像winter一样冷2015年1月27日view:10999ECMAScript 6JavaScriptPromise
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

一、Promise基本用法

很多文章介绍Promise给的例子是这样的:

new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', location.href, true);
    xhr.send(null);
    xhr.addEventListener('readystatechange', function(e){
       if(xhr.readyState === 4) {
           if(xhr.status === 200) {
               resolve(xhr.responseText);
           } else {
               reject(xhr);
           }
       }
    })
}).then(function(txt){
    console.log();
})

一定会有小朋友好奇,说尼玛,这不是比回调还恶心?

这种写法的确是能跑得起来啦……不过,按照Promise的设计初衷,我们编程需要使用的概念并非”Promise对象”,而是promise函数,凡是以Promise作为返回值的函数,称为promise函数(我暂且取了这个名字)。所以应该是这样的:

function doSth() {
    return new Promise(function(resolve, reject) {
        //做点什么异步的事情
        //结束的时候调用 resolve,比如:
        setTimeout(function(){
            resolve(); //这里才是真的返回
        },1000)
    })
}

如果你不喜欢这样的写法,还可以使用defer风格的promise

function doSth2() {
    var defer = Promise.defer();
    //做点什么异步的事情
    //结束的时候调用 defer.resolve,比如:
    setTimeout(function(){
        defer.resolve(); //这里才是真的返回
    },1000)

    return defer.promise;
}

总之两种是没什么区别啦。

然后你就可以这么干:

doSth().then(doSth2).then(doSth);

这样看起来就顺眼多了吧。

其实说简单点,promise最大的意义在于把嵌套的回调变成了链式调用(详见第三节,顺序执行),比如以下

//回调风格
loadImage(img1,function(){
    loadImage(img2,function(){
        loadImage(img3,function(){

        });
    });
});

//promise风格
Promise.resolve().then(function(){
    return loadImage(img1);
}).then(function(){
    return loadImage(img2);
}).then(function(){
    return loadImage(img3);
});

后者嵌套关系更少,在多数人眼中会更易于维护一些。

二、Promise风格的API

在去完cssconf回杭州的火车上,我顺手把一些常见的JS和API写成了promise方式:

function get(uri){
    return http(uri, 'GET', null);
}

function post(uri,data){
    if(typeof data === 'object' && !(data instanceof String || (FormData && data instanceof FormData))) {
        var params = [];
        for(var p in data) {
            if(data[p] instanceof Array) {
                for(var i = 0; i < data[p].length; i++) {
                    params.push(encodeURIComponent(p) + '[]=' + encodeURIComponent(data[p][i]));
                }
            } else {
                params.push(encodeURIComponent(p) + '=' + encodeURIComponent(data[p]));
            }
        }
        data = params.join('&');
    }


    return http(uri, 'POST', data || null, {
        "Content-type":"application/x-www-form-urlencoded"
    });
}

function http(uri,method,data,headers){
    return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open(method,uri,true);
        if(headers) {
            for(var p in headers) {
                xhr.setRequestHeader(p, headers[p]);
            }
        }
        xhr.addEventListener('readystatechange',function(e){
            if(xhr.readyState === 4) {
                if(String(xhr.status).match(/^2\d\d$/)) {
                    resolve(xhr.responseText);
                } else {
                    reject(xhr);
                }
            }
        });
        xhr.send(data);
    })
}

function wait(duration){
    return new Promise(function(resolve, reject) {
        setTimeout(resolve,duration);
    })
}

function waitFor(element,event,useCapture){
    return new Promise(function(resolve, reject) {
        element.addEventListener(event,function listener(event){
            resolve(event)
            this.removeEventListener(event, listener, useCapture);
        },useCapture)
    })
}

function loadImage(src) {
    return new Promise(function(resolve, reject) {
        var image = new Image;
        image.addEventListener('load',function listener() {
            resolve(image);
            this.removeEventListener('load', listener, useCapture);
        });
        image.src = src;
        image.addEventListener('error',reject);
    })
}

function runScript(src) {
    return new Promise(function(resolve, reject) {
        var script = document.createElement('script');
        script.src = src;
        script.addEventListener('load',resolve);
        script.addEventListener('error',reject);
        (document.getElementsByTagName('head')[0] || document.body || document.documentElement).appendChild(script);
    })
}

function domReady() {
    return new Promise(function(resolve, reject) {
        if(document.readyState === 'complete') {
            resolve();
        } else {
            document.addEventListener('DOMContentLoaded',resolve);
        }
    })
}

看到了吗,Promise风格API跟回调风格的API不同,它的参数跟同步的API是一致的,但是它的返回值是个Promise对象,要想得到真正的结果,需要在then的回调里面拿到。

值得一提的是,下面这样的写法:

waitFor(document.documentElement,'click').then(function(){
    console.log('document clicked!')
})

这样的事件响应思路上是比较新颖的,不同于事件机制,它的事件处理代码仅会执行一次。

通过这些函数的组合,我们可以更优雅地组织异步代码,请继续往下看。

三、使用Promise组织异步代码

函数调用/并行

Promise.all跟then的配合,可以视为调用部分参数为Promise提供的函数。譬如,我们现在有一个接受三个参数的函数

function print(a, b, c) {
    console.log(a + b + c);
}

现在我们调用print函数,其中a和b是需要异步获取的:

var c = 10;

print(geta(), getb(), 10); //这是同步的写法

Promise.all([geta(), getb(), 10]).then(print); //这是 primise 的异步写法

竞争

如果说Primise.all是promise对象之间的“与”关系,那么Promise.race就是promise对象之间的“或”关系。

比如,我要实现“点击按钮或者5秒钟之后执行”

var btn = document.getElementsByTagName('button');

Promise.race(wait(5000), waitFor(btn, click)).then(function(){
    console.log('run!')
})

异常处理

异常处理一直是回调的难题,而promise提供了非常方便的catch方法:

在一次promise调用中,任何的环节发生reject,都可以在最终的catch中捕获到

Promise.resolve().then(function(){
    return loadImage(img1);
}).then(function(){
    return loadImage(img2);
}).then(function(){
    return loadImage(img3);
}).catch(function(err){
    //错误处理
})

这非常类似于JS的try catch功能。

复杂流程

接下来,我们来看比较复杂的情况。

promise有一种非常重要的特性:then的参数,理论上应该是一个promise函数,而如果你传递的是普通函数,那么默认会把它当做已经resolve了的promise函数。

这样的特性让我们非常容易把promise风格的函数跟已有代码结合起来。

为了方便传参数,我们编写一个currying函数,这是函数式编程里面的基本特性,在这里跟promise非常搭,所以就实现一下:

function currying(){
    var f = arguments[0];
    var args = Array.prototype.slice.call(arguments,1);
    return function(){
        args.push.apply(args,arguments);
        return f.apply(this,args);
    }
}

currying会给某个函数”固化”几个参数,并且返回接受剩余参数的函数。比如之前的函数,可以这么玩:

var print2 = currying(print,11);

print2(2, 3); //得到 11 + 2 + 3 的结果,16

var wait1s = currying(wait,1000);

wait1s().then(function(){
    console.log('after 1s!');
})

有了currying,我们就可以愉快地来玩链式调用了,比如以下代码:

Promise.race([
    domReady().then(currying(wait,5000)), 
    waitFor(btn, click)])
    .then(currying(runScript,'a.js'))
    .then(function(){
        console.log('loaded');
        return Promise.resolve();
    });

表示“domReady发生5秒或者点击按钮后,加载脚本并执行,完毕后打印loaded”。

四、总结

promise作为一个新的API,是几乎完全可polyfill的,这在JS发展中这是很少见的情况,它的API本身没有什么特别的功能,但是它背后代表的编程思路是很有价值的。

评论
发表评论
10个月前

我看不懂

11个月前
赞了此文章!
1年前
赞了此文章!
1年前
添加了一枚【评注】:改成 print(syncA(), syncB(), 10); //这是同步的写法 Promise.all([asyncA(), asyncB(), 10]).then(print); //这是 primise 的异步写法 会更清晰一些
1年前
赞了此文章!
2年前
赞了此文章!
2年前
赞了此文章!
2年前
添加了一枚【评注】:这里写错了
2年前
添加了一枚【评注】:这个好像已经被被标为obsolete了,es6的draft文档里也没有见到这个。http://stackoverflow.com/questions/27889687/promise-defer-browser-support
2年前
赞了此文章!
2年前
赞了此文章!
2年前

waitFor代码好像写错了

2年前
添加了一枚【评注】:then 调用和上文嵌套不等价, then相当于事件完成后多个平级的回调, 嵌套回调是一系列异步串行调用
2年前
赞了此文章!
2年前
赞了此文章!
2年前
赞了此文章!
2年前

@Jin_C 笔误 已经修正

2年前
赞了此文章!
2年前

Promise还可以在每个then那里分别抓错。

2年前

@Jin_C 需要new.

2年前
添加了一枚【评注】:这里要不要new 呢?
2年前

第一次看 promise,打开iojs,输入function doSth() { return Promise(function(resolve, reject) { //做点什么异步的事情 //结束的时候调用 resolve,比如: setTimeout(function(){ resolve(); //这里才是真的返回 },1000) }) };

尼玛,undefined is not a Promise -。-

2年前
赞了此文章!
2年前

winter大爷又发干货啦

2年前
赞了此文章!
2年前
赞了此文章!
2年前

醍醐灌顶,感谢分享

2年前
赞了此文章!
2年前
赞了此文章!
2年前
赞了此文章!
2年前
赞了此文章!
2年前
赞了此文章!
2年前
赞了此文章!
WRITTEN BY
寒冬winter
ali-mfe-hire@list.alibaba-inc.com 阿里无线前端求简历
TA的新浪微博
PUBLISHED IN

我的收藏