сделайте обещание. все ждут, пока оба 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

Вы забыли вернуть обещания.

Кстати, для читабельности кода используйте строки шаблона

Вот фиксированный 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));
};