Await async React

Question

I have a method sending API request in loop of list, after the loop I would like to update view on the screen, but this update is not waiting for the end of the last post. Any suggestions?

async doPost(name) {
    return await axios.post("/api/data/" + name);
}

async doAction(dataList) {
    dataList.map(dt=> {
      const actionResponse = this.doPost(dt.name);
      if (actionResponse) {
        console.log("response: " + actionResponse);
        this.updateNotify(dt);
      }
  });
  this.UpdateView();
};

el solo lobo · Accepted Answer · 2019-11-12 10:53:53Z

1

I think you missed the awaitkeyword before this.doPost()

async doPost(name) {
    return await axios.post("/api/data/" + name);
}

async doAction(dataList) {
   const dtData =  dataList.map(async dt=> {
      const actionResponse = await this.doPost(dt.name);
      if (actionResponse) {
        console.log("response: " + actionResponse);
        return dt;
       // this.updateNotify(dt);
      }
  });

  const data = await Promise.all(dtData);
  this.updateNotify(data)

  this.UpdateView();
};

edited Nov 12, 2019 at 10:53

answered Nov 12, 2019 at 10:40

el solo lobo

99312 silver badges26 bronze badges

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

3 Comments

JJ36 Over a year ago

But await operator in that place is not compiled: The await operator can only be used in an async function.

JJ36 Over a year ago

But inside the loop it is not working, not even compiled

el solo lobo Over a year ago

I have updated my answer (untested code), please take a look.

Antoan Elenkov · Accepted Answer · 2020-01-25 15:11:28Z

Axios library by default returns promise like object - AxiosPromise<any>, so making the function "doPost" async with await in it will results in Promise<AxiosPromise<any>> type. That's why I changed it to non-async, cause it is not needed here.

doPost(name) : AxiosPromise<any> {
     return axios.post("/api/data/" + name);
}

async doAction(dataList: { name: string }[]) {
    const dtData: AxiosPromise<any>[] = dataList
        .map(dt => axios.doPost(dt.name)) // creating all post requests
        .map(x => x.then(x => this.updateNotify(x))); // setting updateNotiFy to  execute when post request returns result

    // Makes sure all executions of post requests are done(resolved/rejected)
    await Promise.allSettled(dtData);

    this.UpdateView();
}

Collectives™ on Stack Overflow

Await async React

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related