Блог

У меня есть профиль, который делает это..

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

Когда я запускаю это, страница сразу читается как неопределенная, undefined. Это связано с тем, что insights и точки соприкосновения не определены, поскольку вызовы API не завершены.

Когда я смотрю на журнал в Eclipse (это приложение Springboot), я вижу, что ответ является успешным, и он выводит ответ в консоль там… но приложение не обновляется.

Как я могу сделать так, чтобы Promise.all печатал журнал ПОСЛЕ выполнения обоих вызовов API?

Я попытался вставить Promise.all в componentDidMount и в render()

Любая помощь была бы высоко оценена!!

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

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

Вот исправленное 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));
};