码农干货系列【19】Promise.js with AJAX

更新

新增Promise.timeout方法，检测task执行超时并且自动reject

使用

        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;

        }

AJAX

function xhr(options) {
    var promise = Promise(),
        req = new XMLHttpRequest();

    req.open(options.method || 'GET', options.url, true);

    // Set request headers if provided.
    Object.keys(options.headers || {}).forEach(function (key) {
        req.setRequestHeader(key, options.headers[key]);
    });

    req.onreadystatechange = function (e) {
        if (req.readyState !== 4) {
            return;
        }

        if ([200, 304].indexOf(req.status) === -1) {
            promise.reject('Server responded with a status of ' + req.status);
        } else {
            promise.resolve(e.target.result);
        }
    };

    req.send(options.data || void 0);

    return promise;
}

使用：

xhr({ url: "xxx.php?a=xxx" }).then(function (msg) {

})

当然，promise支持等待N个AJAX都完成之后进行回掉:

Promise(xhr({ url: "a.php?c=xxx" }), xhr({ url: "b.php?d=xxx" })).then(function () {

})

上面的写法的Promise.when的缺省形式。

Promise.timeout with AJAX

这里需要思考的是:timeout是属于AJAX还是属于Promise?

如果属于AJAX,那么就有下面这种形式：

xxx.ajax("xxx.php", {
    method: "GET",
    data: null,
    onSuccess: function () { },
    onTimeout: function () { },
    timeout: 30000
});

如果属于Promise:

Promise.timeout(xhr({ url: "xxx.php" }), 30000).then(
    function () { },
    function () { }
)

更多

有关promise更多信息你可以访问:

getting started with Promise.js（总）

你可以点击这里下载最新版promise.js。