让 promise.all 等到两个 API 都完成后再完成

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));
};