Reactjs - Method在API调用获取数据之前返回结果。 （总是空对象）

Question

在我的简化代码中：

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

API端点获取数据但需要一些时间。该方法总是返回[]，但如果我放入console.log（Res），那么数据就在那里。这意味着该方法返回初始const data = [];，并且它不会等到API返回数据。

我该如何解决这个问题？

Regrds

Answer 1

您应该使用Promise。

例如：

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

并使用这样的方法：

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

Answer 2

这里的时间存在问题：

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

如果您需要对数据进行额外处理，然后再将其返回给调用者 - 在您的示例中，您将其放入数组中 - 您需要将其与另一个Promise一起包装：

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