Как последовательно вывести данные нескольких url?

Question

Нужно написать код, который все URL из этого массива загружает один за другим (последовательно) и сохраняет результаты в массиве results, а потом выводит. Не могу понять, будет ли моё решение правильным, если нет, то как сделать правильным. Задание взято c learn.js про промисы. Решение, которое там есть, основано на httpGet, а я бы хотела переделать на fetch

let urls = [
    'user.json',
    'guest.json'
];

let results = []

urls.forEach((el)=>{
    fetch(el).then(response=>response.json()).then(data=>{
        result.push(data)
        console.log(data)
    })
})

Answer 1

Если вам нужно последовательно пройтись по всем url, то вам нужно ждать возврата ответа от одного запроса, что бы перейти к следующему. Как решение, можно воспользоваться await.

(async ()=>{

let urls = [
    'user.json',
    'guest.json'
];

let results = [];

for(let i = 0; i < urls.length; i++){
    // получаем ответ. await не продолжаёт 
    // цикл до тех пор пока Promise не завершится
    let resp = await fetch(urls[i]);
    
    // аналогично с получением json из ответа
    results.push(await resp.json())
}

console.log(results);

})()

Но, не всегда есть смысл ждать пока завершиться предыдущая задача перед тем как начинать новую. Т.е. мы можем отправить несколько запросов одновременно и подождать пока завершиться всё.

(async () => {

let urls = [
    'user.json',
    'guest.json'
];

// Promise.all - ждёт завершения всех Promise которые были ему переданы
let results = await Promise.all(
    // для каждой url делаем fetch, который возвращает нам Promise
    urls.map(url => fetch(url).then(resp => resp.json()))
)

console.log(results);

})()

Ссылки:

Answer 2

А что если рекурсивно

let urls = [
    'user.json',
    'guest.json'
];

let results = [];

function fetchArray(array, resolve, reject) {
  if(array.length>0) {
    let el = array.shift();
    fetch(el)
      .then(response=>response.json())
      .then(data=>{
        result.push(data);
        console.log(data);
        fetchArray(array, resolve, reject);
    }).catch(function(e) {
      console.log(e);
      reject(e);
    });
  } else {
    resolve(results);
  }
}

let p = new Promise(function(resolve, reject) {
  fetchArray(urls, resolve, reject);
});

p.then(function(value) {
  console.log(value);  
}).catch(function(e) {
  console.log(e);
})

БЛОГ НА HUSL

Как последовательно вывести данные нескольких url?

Ответы (2 шт):