试图理解 async/await 和 Promise [重复]

问题描述 投票:0回答:1

我知道关于异步/等待的一些事情是只有异步函数可以使用等待,等待等待承诺/异步函数返回解决或拒绝。因此,我试图深入学习它,但对为什么这段代码没有给出预期结果感到困惑

var x = [1]

const add2 = async () => {
    x = [...x, 2]
    return Promise.resolve()
}

const add3 = async () =>  {
    setTimeout(() => {
        x = [...x, 3]
        return Promise.resolve()
    }, 4000)
}

const final = async () => {
    console.log(x)
    await add2()
    console.log(x)
    await add3()
    console.log(x)
}

final()

这会给我输出为

[1]
[1, 2]
[1, 2]

而我的预期输出是

[1]
[1, 2]
[1, 2, 3]

所以我试着做了一些改变,我得到了输出

var x = [1]

const add2 = async () => {
    x = [...x, 2]
    return Promise.resolve()
}

const add3 = (z) => new Promise((resolve, reject) => {
    setTimeout(() => {
        x = [...x, 3]
        console.log(z)
        return resolve()
    }, 4000)
})

const final = async () => {
    console.log(x)
    await add2()
    console.log(x)
    await add3()
    console.log(x)
}

final()

所以我很困惑我是否可以仅使用异步函数而不是定义新的承诺来实现此功能

javascript node.js
1个回答
1
投票

第一个片段中的问题在

add3
函数

const add3 = async () =>  {
    setTimeout(() => {
        x = [...x, 3]
        return Promise.resolve()
    }, 4000)
}

在上面,

return Promise.resolve()
将是传递给
setTimeout
的匿名函数的返回语句,但您期望它是
add3
异步函数的返回。所以
return Promise.resolve()
没有在任何地方使用。

const add3 = (z) => new Promise((resolve, reject) => {
    setTimeout(() => {
        x = [...x, 3]
        console.log(z)
        return resolve()
    }, 4000)
})

第二个片段有效,因为即使

return resolve()
是内部箭头函数的返回值,
resolve
参数属于包装承诺,所以它解决了相同的问题。

© www.soinside.com 2019 - 2024. All rights reserved.