Question

我有一个个人资料正在执行此操作。

Promise.all([this.fetchInsights(), this.fetchTouchpoints()])
     .then(([insights, touchpoints]) =>
       console.log(insights, touchpoints)
     )

这里是fetchInsights()

fetchInsights = () => {
  fetch('API_URL' + this.queryParams.custId + '/' + this.queryParams.acctNo, {
    method: 'GET', // or 'PUT'
    headers:{
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  }).then(res => res.json())
  .catch(error => console.error('Error:', error));
};

这里是fetchTouchpoints()

  fetchTouchpoints = () => {
    fetch('API_URL' + this.queryParams.custId + '/' + this.queryParams.acctNo, {
      method: 'GET', // or 'PUT'
      headers:{
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    }).then(res2 => res2.json())
    .catch(error => console.error('Error:', error));
  };

运行此命令时，页面立即读取未定义的内容。这是因为未完成API的调用，因此洞见和接触点均未定义。

当我在Eclipse（这是一个Springboot应用程序）中查看日志时，我看到响应都成功了，并且在控制台中打印出了响应...但是该应用程序没有更新。

我该如何做，以便Promise.all在两个API调用完成后打印日志？

我尝试将Promise.all放入componentDidMount和render()

任何帮助将不胜感激！

Answer 1

您忘记了兑现承诺。

顺便说一句，为使代码易于阅读，请使用template strings

这是固定的fetchInsights：

fetchInsights = () => {
  return fetch(`API_URL${this.queryParams.custId}/${this.queryParams.acctNo}`, {
    method: 'GET', // or 'PUT'
    headers:{
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  }).then(res => res.json())
  .catch(error => console.error('Error:', error));
};

做出promise.all等到两个API完成后再完成

1 个答案: