ECMAScript 6（ES6） 特性概览和与ES5的比较19-Promises

1.Promise 用法

可以异步的，并在未来提供一个值的一流表现。

ECMAScript 6

function msgAfterTimeout (msg, who, timeout) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${msg} Hello ${who}`))
    })
}
msgAfterTimeout("","Foo",100).then((msg) => 
    msgAfterTimeout(msg, "Bar", 200)
).then((msg) => {
    console.log(`done after300ms:${msg}`)
})

ECMAScript 5

function msgAfterTimeout (msg, who, timeout, onDone) {
    setTimeout(functiom () {
        onDone(msg + " Hello " + who + "!");
    },timeout);
}
msgAfterTimeout("", "Foo", 100, function (msg){
    msgAfterTimeout(msg, "Bar", 200, function (msg) {
        console.log("done after300ms" + msg);
    });
});

2.Promise 组合

将一个或多个promises组合到新的promise中，而不必自己处理底层异步操作的排序。

ECMAScript 6

function fetchAsync (url, timeout, onData, onError) {
    ...
}
let fetchPromised = (url, timeout) => {
    return new Pormise((resovle, reject) => {
        fetchAsync(url, timeout, resolve, reject)
    })
}
Promise.all([
    fetchPromised("http://www.baidu.com".500),
    fetchPromised("https://translate.google.cn".500),
    fetchPromised("http://www.coloring-book.co".500)
]).then((data) => {
    let [ foo, bar, baz ] = data
    console.log(`success:foo=${foo} bar=${bar} baz=${baz}`)
},(err) => {
    console.log(`error:${err})
})

ECMAScript 5

function fetchAsync (url, timeout, onData, onError) {
    …
}
function fetchAll (request, onData, onError) {
    var result = [], results = 0;
    for (var i = 0; i < request.length; i++) {
        result[i] = null;
        (function (i) {
            fetchAsync(request[i].url, request[i].timeout, function (data) {
                result[i] = data;
                if (++results === request.length)
                    onData(result);
            }, onError);
        })(i);
    }
}
fetchAll([
    { url: "http://www.baidu.com", timeout: 500 },
    { url: "https://translate.google.cn", timeout: 500 },
    { url: "http://www.coloring-book.co", timeout: 500 }
], function (data) {
    var foo = data[0], bar = data[1], baz = data[2];
    console.log("success: foo=" + foo + " bar=" + bar + " baz=" + baz);
}, function (err) {
    console.log("error: " + err);
});