Конструкция fetch в fetch

164

04 августа 2021, 11:30

Есть у меня подобная конструкция. Не понимаю, как сделать так, чтобы после получения информации со второго fetch можно было бы использовать как и data1, так и data2 между собой. Например, вложить одно в другое. Потому что если отконсолить data1 во втором fetch, то он её не видит

function getData() {
    fetch(api1, {method: 'get'})
        .then(response => response.json())
        .then(function (data1) {
            return fetch(api2, {method: 'get'})
        })
        .then(response => response.json())
        .then(function (data2) {
            console.log(data1);
        })
        .catch(error => console.log('Причина ошибки: ' + error));
}
getData();

Answer 1

Если оба запроса независимы друг от друга и нужно получить данные из обоих, плюс ко всему fetch возвращает promise, то я бы использовал в данном случае метод Promise.all. Пример кода:

function getData() {
  var getDataFirst = fetch(api1, {method: 'get'})
    .then(response => response.json());
  var getDataSecond = fetch(api2, {method: 'get'})
    .then(response => response.json());
  Promise.all([getDataFirst, getDataSecond])
    .then(
      values => { 
        console.log(values);
      },
      reason => {
        console.log(reason);
      }
    );
}

Promise.all ждет выполнения всех обещаний (или первого метода reject). В результате также возвращает Promise, который будет выполнен когда будут выполнены все обещания, и в values - будут лежать все Ваши результаты в виде массива из двух значений.

Answer 2

Проблема в том, что Вы два последних then читаете с первого fetch Попробуйте сделать так:

function getData() { 
    fetch(api1, {method: 'get'}) 
        .then(response => response.json()) 
        .then(function (data1) { 
            fetch(api2, {method: 'get'}) 
              .then(response => response.json()) 
              .then(function (data2) { 
                  console.log(data1); 
              }) 
              .catch(error => console.log('Причина ошибки: ' + error)); 
        }) 
        .catch(error => console.log('Причина ошибки: ' + error)); 
} 
 
getData();

Answer 3

Действительно, с then'ами легко запутаться, поэтому и придумали async/await:

async function getData() {
    try {
        let response = await fetch(api1, {method: 'get'});
        const data1 = await response.json();
        response = await fetch(api2, {method: 'get'});
        const data2 = await response.json();
        console.log(data1, data2);
    } catch(error) {
        console.log('Причина ошибки: ' + error));
    } 
}