Почему в выборке и ответе HTTP-запроса необходимы два экземпляра Promise.all?

Question

В приведенном ниже коде мы пытаемся получить несколько URL-адресов и обрабатывать ошибки, когда ответы возвращаются.

Я заметил использование 2 Promise.all здесь. Почему необходимо использовать второй Promise.all? Что будет, когда вы удалите его?

Promise.all( //1st one
    urls.map(url => fetch(url).catch(err => err))
  )
  .then(responses => Promise.all( //2nd one
    // if it's an error then pass on
    // otherwise response.json() and catch errors as results
    responses.map(r => r instanceof Error ? r : r.json().catch(err => err))
  ))
  .then(results => {
    alert(results[0].name); // Ilya Kantor
    alert(results[1]); // SyntaxError: Unexpected token < in JSON at position 0
    alert(results[2]); // TypeError: failed to fetch (text may vary)
  });

Answer 1

Вы можете просто объединить fetch и json в одну цепочку:

urls = [
    "https://jsonplaceholder.typicode.com/todos/1",
    "http://wtf"
]

Promise.all(
    urls.map(url => 
        fetch(url).then(r => r.json()).catch(String))
).then(console.log)

Answer 2

Вторая Promise.all() отображает все успешные ответы в JSON.

Поскольку Response.json() сама возвращает обещание, результирующий массив из responses.map(...) может выглядеть примерно как

[ error, Promise<Object>, Promise<Object>, error, Promise<Object> ]

Чтобы дождаться разрешения всех обещаний json(), необходимо использовать секунду Promise.all().

Необещания в массиве будут обрабатываться как Promise.resolve(item)

---

Обратите внимание, что этот код может быть написан гораздо более кратко (см. Другие ответы).Этот ответ скорее «почему код такой, какой он есть» ?