十九、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);
});