我正在尝试理解这三者之间的区别。回调函数和 Promise 很清楚,但我不明白 async/await 的用法。我知道它是 Promise 的语法糖,但我所尝试的并没有起作用。我分享了一段我尝试理解所有这些的代码...
我已经尝试使用一个数组
var array = [1,2,3];
还有两个函数
get()
在1秒内执行并在控制台打印array
post(item)
在2秒内执行并将一个新项推入array
现在,我想要的是post
方法应该先执行,然后才是get
,以便在控制台上的结果应该是[1,2,3,4]
而不是[1,2,3]
回调函数
function get() {
setTimeout(() => console.log(array), 1000);
}
function post(item, callback) {
setTimeout(() => {
array.push(item);
callback();
}, 2000);
}
function init() {
post(4, get);
// returns [1,2,3,4] ✅
}
虽然运行良好,但如果回调函数过多,则代码将变得混乱...
承诺(Promise)
function get() {
setTimeout(() => console.log(array), 1000);
}
function post(item) {
return new Promise((resolve, reject) => setTimeout(() => {
array.push(item)
resolve();
}, 2000));
}
function init() {
post(4).then(get);
// returns [1,2,3,4] ✅
}
代码变得更加简洁了。但是仍然有多个then
调用... 现在,
Async/Await
function get() {
setTimeout(() => console.log(array), 1000);
}
function post(item) {
setTimeout(() => {
array.push(item)
}, 2000);
}
async function init() {
await post(4);
get();
// returns [1,2,3] ❌
await post(4);
await get();
// returns [1,2,3] ❌
post(4);
await get();
// returns [1,2,3] ❌
}
更干净的版本,但无论哪种方式,都不起作用...我也尝试过这个方法(将post
和get
两个函数都转换为异步函数,并使用then
调用)
async function get() {
setTimeout(() => console.log(array), 1000);
}
async function post(item) {
setTimeout(() => {
array.push(item)
}, 2000);
}
async function init() {
post(4).then(get);
// returns [1,2,3] ❌
}
但仍然没有用。所以我对这个特性(即async/await)完全感到困惑。请详细解释这个例子。同时,请在同一上下文中告诉我关于Promise.resolve
和Promise.all
的内容!谢谢
init
从.then()
语法更改为await
语法时,仍需要使用返回Promise的post
函数。 - Bergi