Return a promise with async/await inside then

Question

Im quite familiar with javascript but I'm a bit confuse with Promise, Async/Await

How do I add async/await to modify a promise data and return the original Promise

e.g.

this working fine

function test() {
    const data = {
        sample: 1,
        test: 2
    }

    const prom = Promise.resolve(data)

    prom.then(  data => {
        data.sample =  5
    })
    return prom
}

test().then( data => {
    console.log( data )
})
//output: {sample: 5, test: 2}

but if I do async/await to modify the promise data, the original data seems to output before the promise is modified e.g.

function test() {
    const data = {
        sample: 1,
        test: 2
    }

    const prom = Promise.resolve(data)

    prom.then( async data => {
        data.sample = await  5
    })
    return prom
}

test().then( data => {
    console.log( data )
})
//output: {sample: 1, test: 2}

@Bergi its just a simplified example, my actual code is doing api request and modifying the data of the original promise — SymmetricsWeb, Sep 12 '22 at 14:00
@SymmetricsWeb It would be better, and easier to answer accurately, if you would post your actual code. You can [edit] your question to include it. — Bergi, Sep 12 '22 at 14:04

score 2 · Accepted Answer · answered Sep 12 '22 at 14:01

this working fine

Not when the promise rejects, no. When using then, you should return the new promise for further chaining, and resolve it with the modified value; you should not mutate values in a promise. So instead of

prom.then(  data => {
    data.sample =  5
})
return prom

better write

return prom.then(data => {
    data.sample = 5
    return data
})

If you carried over this pattern to the async version, it would just work as well - but really, when using async/await, there is no reason to use .then()! Better write

const data = await prom;
data.sample = await something;
return data;

and mark the test function itself as async.

Return a promise with async/await inside then

1 Answers1