javascript async with multiple await

Question

I have three api request to work asynchronous, but the second request is working before the first request is completed. How do I get the second api request to start after completing the first request and then third after the second?

async doSave(event)
{
  await this.server.post('/insertRecord',{name:'joe'});

            //have to work after completion of above request

  await this.server.post('/changeCountry',{countryName:'US'});

          //have to work after completion of above request

  await this.server.post('/satge',{stage:'fifth'});
}

if your app breaks because of the order of requests, your doing it wrong. — Lawrence Cherone
– Lawrence Cherone, Commented Nov 22, 2018 at 8:56

Sumurai8 · Accepted Answer · 2018-11-22 08:55:18Z

3

If your second request starts before your first request, it means that the Promise returned by this.server.post resolves before the request is complete. Alternatively, it does not return a Promise at all in which case it starts your asynchronous request, and then runs the next line in this function after this.server.post returns.

answered Nov 22, 2018 at 8:55

Sumurai8

20.8k11 gold badges70 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Lemon · Accepted Answer · 2018-11-22 13:27:45Z

The server should return a promise, in that case await will wait for it to resolve. In the code below I did a mock of the server to test the whole code. It will do the work synchonously.

const server = {
  post: function(url, data) {
    const time = 300 + Math.random() * 1500;
    console.log("Posting at " + url + " ... (" + Math.round(time) + "ms)");
    return new Promise(resolve => setTimeout(() => resolve(), time)
    );
  }
};

async function doSave(event) {
  await server.post('/insertRecord', {
    name: 'joe'
  });

  //have to work after completion of above request
  console.log('doing Work after InsertRecord');
  await server.post('/changeCountry', {
    countryName: 'US'
  });

  //have to work after completion of above request
  console.log('doing Work after changeCountry');
  await server.post('/satge', {
    stage: 'fifth'
  });
}
doSave();

Output:

Posting at /insertRecord ... (1306ms)
doing Work after InsertRecord
Posting at /changeCountry ... (1752ms)
doing Work after changeCountry
Posting at /satge ... (1616ms)

Check this link for more information about await, async, promises

shakogele · Accepted Answer · 2018-11-22 09:11:02Z

0

ideally this.server - should return promises (axios for eg returns promises), but if it does not than you can use Promises instead of Async/await and chain your requests one after another.

answered Nov 22, 2018 at 9:11

shakogele

3994 silver badges14 bronze badges

Collectives™ on Stack Overflow

javascript async with multiple await

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related