码农干货系列【18】getting started with Promise.js（总）

引用Promise.js

   <script src="promise.js"></script>

你可以点击这里下载。

ps：如果使用了SCJ Framework，请使用SCJ.createPromise代替下面的Promise 

done/resolve

promise.js提供了done和resolve方法，done负责注册成功的回调函数，resolve负责触发。

        function cb() {
            alert('success')
        }
        var prms = Promise()
        prms.done(cb)
        setTimeout(function() {
            prms.resolve()
        }, 3000)

在3秒之后，浏览器将alert  “success”。

当然你也可以通过prms.resolve(“xxx”)传递参数给cb函数使用，如：

        function cb(num) {
            alert(num)
        }
        var prms = Promise()
        prms.done(cb)
        setTimeout(function() {
            prms.resolve(1)
        }, 3000)

在3秒之后，浏览器将alert  “1”。

fail/reject

fail函数负责注册失败的回调函数，reject负责触发。如：

        function cb() {
            alert('fail')
        }
        var prms = Promise()
        prms.fail(cb)
        setTimeout(function () {
            prms.reject()
        }, 3000)

progress/notify

progress函数负责注册处理中进度的回调函数，notify负责触法。如：

        function cb() {
            alert('progress')
        }
        var prms = Promise()
        prms.progress(cb)
        setInterval(function() {
            prms.notify()
        }, 2000)

每隔两秒浏览器会弹出一个progress。

chain

        function cb1() {
            alert('success')
        }
        function cb2() {
            alert('fail')
        }
        function cb3() {
            alert('progress')
        }
        var prms = Promise();
        prms.done(cb1).fail(cb2).progress(cb3)
        setTimeout(function () {
            prms.resolve()
            //prms.reject()
            //prms.notify()

        }, 3000)

then

        function fn1() {
            alert('success')
        }
        function fn2() {
            alert('fail')
        }
        function fn3() {
            alert('progress')
        }
        var prms = Promise()
        prms.then(fn1, fn2, fn3)
        prms.resolve()
        prms.reject()
        prms.notify()

当然也支持prms.then().then().then()……….

当then的第一个参数为一个数组的时候，要等所有task都完成:

f1().then([f2_1, f2_2]).then(f3)

如上面的代码:

f1执行完后，同时执行f2_1和f2_2，当f2_1和f2_2全部都执行完成才会执行f3。

any

f1().any([f2_1, f2_2]).then(f3)

f1执行完后，同时执行f2_1和f2_2，当f2_1和f2_2中的任意一个执行完成才会执行f3。

always

        var prms = Promise()
        prms.always(function () {
            alert(2)
        })
        setTimeout(function () {
            // prms.resolve()
            prms.reject()
        }, 3000)

always(fn)等同于then(fn,fn)，也等同于done(fn).fail(fn)

wait

        function f10() {
            var promise = Promise();
            setTimeout(function () {

                console.log(10);
                promise.resolve();
            }, 4500)

            return promise;
        }

        function f11() {
            var promise = Promise();
            setTimeout(function () {

                console.log(11);
                promise.resolve();
            }, 1500)

            return promise;
        }

        f11().wait(5000).then(f10)  //execute f11 then wait 5000ms then execute f10

ensure

ensure方法类似try…catch..finally中的finally，不管task成功失败都会执行。

Promise.when

        Promise.when(f1(), f2()).then(f3).then(f4)
      
        function f1() {
            var promise = Promise();
            setTimeout(function () {

                console.log(1);
                promise.resolve("from f1");
            }, 1500)

            return promise;
        }

        function f2() {
            var promise = Promise();
            setTimeout(function () {

                console.log(2);
                promise.resolve();
            }, 5500)

            return promise;
        }

        function f3() {
            var promise = Promise();
            setTimeout(function () {

                console.log(3);
                promise.resolve();
            }, 1500)

            return promise;

        }

        function f4() {
            var promise = Promise();
            setTimeout(function () {

                console.log(4);
                promise.resolve();
            }, 1500)

            return promise;
        }

上面promise.when的等同简略写法也可以是:Promise(f1(),f2()).then….

Promise.any

Promise.any的使用和when一样，when的意义是等所有task都完成再执行后面的task，而any的意义是任何一个task完成就开始执行后面的task。

Promise.timeout

        Promise.timeout(f1(), 2000).then(f2, function () {
            alert("timeout");
        }).wait(5000).then(f3);
        function f1() {
            var promise = Promise();
            setTimeout(function () {

                console.log(1);
                promise.resolve("from f1");
            }, 1500)

            return promise;
        }

        function f2() {
            var promise = Promise();
            setTimeout(function () {

                console.log(2);
                promise.resolve();
            }, 1500)

            return promise;
        }

        function f3() {
            var promise = Promise();
            setTimeout(function () {

                console.log(3);
                promise.resolve();
            }, 1500)

            return promise;

        }

with wind.js

    <script src="wind-all-0.7.3.js"></script>
    <script src="promise.js"></script>
    <script>

        Wind.Promise.create = function (fn) {
            var prms = Promise();
            fn(prms.resolve, prms.reject);
            return prms;
        }

        var testAsync = eval(Wind.compile("promise", function () {
            for (var i = 0; i < 3; i++) {   //loop 3 times
                var aa = $await(f1());
                alert(aa);                  //alert “from f1” 
                $await(f2().wait(3000));    //execute f2 then wait 3000ms
                $await(f3());
            }
        }));

        testAsync();

        function f1() {
            var promise = Promise();
            setTimeout(function () {
                console.log(1);
                promise.resolve("from f1");
            }, 2500)

            return promise;
        }

        function f2() {
            var promise = Promise();
            setTimeout(function () {
                console.log(2);
                promise.resolve();
            }, 1500)

            return promise;
        }

        function f3() {
            var promise = Promise();
            setTimeout(function () {
                console.log(3);
                promise.resolve();
            }, 1500)

            return promise;
        }
    </script>

That’s all.Have Fun!