更新:在底部添加了 3 种不同方法之间的实际区别
假设some_async_call(); 被定义为异步函数:async function some_async_call() { ... }
这个函数返回的是一个Promise,这意味着value现在是一个promise:value.then( function(result) { } )
当我把它翻译成代码时:
async function some_async_call() {
if (theMoonIsInTheRightPosition)
return Fetch('/api/data/') // this returns a promise as well.
return false;
}
我现在可以做两件事:
function parentFunction(callback) {
var promise = some_async_call();
promise.then( callback );
return ...; // you can't "return" the value of an async call synchronously, since it is a promise.
}
或:
async function asyncParentFunction( callback ) {
var value = await some_async_call();
if (value)
callback( value );
return value;
}
但是,这也将父函数转换为异步函数,这意味着该函数的直接返回值......也是一个承诺。
长话短说:
您可以使用回调来处理异步函数、promise 或 async/await
回调
function doStuff(callback) {
// do asynchronous stuff
var result = 100;
callback(result); // once you're done with stuff
}
doStuff( function(data) { console.log('Im done!', data); } );
承诺
function doStuff() {
return new Promise(function(resolve, reject) {
// do asynchronous stuff
var result = 100;
resolve(result);
});
}
doStuff.then(function(data) { console.log('Im done!', data); });
异步/等待
function doStuff() {
return new Promise(function(resolve, reject) {
// do asynchronous stuff
var result = 100;
resolve(result);
});
}
(async function() { // async/await only works in async functions.
var data = await doStuff();
console.log('Im done!', data);
})();
如您所见:promise 和 async/await 使用相同的机制,非常值得一读。
三者区别的实际例子:
回调
function fetchUserWithPosts(userId, callback) {
fetchUser(userId, function(user) {
fetchPostsByUserId(userId, function(posts) {
callback({
user: user,
posts: posts
});
});
});
}
承诺
function fetchUserWithPosts(userId) {
return Promise.all([
fetchUser(userId),
fetchPostsByUserId(userId)
]).then(function(result) {
return {
user: result[0],
posts: result[1]
};
});
}
异步/等待
async function fetchUserWithPosts(userId) {
return {
user: await fetchUser(userId),
posts: await fetchPostsByUserId(userId);
};
}