Reactjs - Method returns result before the API call get the data. ( always empty object )

Question

In my simplified code:

static getData(Id) {
  const data = [];
  api.getData(lId)
    .then((Res) => {
      data.push(Res);
    });
  return data;
}

The API endpoint gets the data but it takes some time. the method always returns [], but if I put a console.log(Res), the data is there. It means the method returns the initial const data = []; and it doesn't wait until the API returns the data.

How should I fix this problem?

Regrds

By using promises correctly. `getData` has to return a promise. See the duplicate. — Felix Kling, Oct 16 '17 at 16:40

score 1 · Answer 1 · answered Oct 16 '17 at 15:43

1

You should use Promise.

For example:

static getData(Id) {
  return new Promise((resolve) => {
    api.getData(Id)
      .then((Res) => {
         resolve(Res);
      });
  });
}

And use this method like this:

getData(15)
  .then((data) => {
    console.log(data);
  });

answered Oct 16 '17 at 15:43

Kenji Mukai

599
4
8

I used Promise, api is a promise. – Adel Oct 16 '17 at 15:49
Yes, and you should use another promise because api does the call asynchronous. – Kenji Mukai Oct 16 '17 at 15:52

score 1 · Accepted Answer · answered Oct 16 '17 at 16:20

There's a problem with your timing here:

static getData(Id) {
  const data = [];
  api.getData(lId)
    .then((Res) => {
      data.push(Res);
    });
  return data;  <-- Gets returned before the promise resolves/rejects
}

If you need to do extra processing on your data before it is returned to the caller - in your example, you're putting it into an array - you're going to need to wrap it with another Promise:

static getData(Id) {
  return new Promise((resolve, reject) => {
      api
        .getData(Id)
        .then((Res) => {
          const data = []
          data.push(Res);
          resolve(data)
        })
        .catch(reject)
  })
}

Reactjs - Method returns result before the API call get the data. ( always empty object )

2 Answers2