Как обработать массив responses?

Question

[okonoshi]

Ребята, всю голову уже сломал.
Я вроде понял тему, а оказалось нифига не могу понять

Почему это работает?

let a = await fetch(`https://api.github.com/users/iliakan`);
 let b = await a.json();

А вот это не работает?

const responses = await names.map((name) =>
    fetch(`https://api.github.com/users/${name}`)
await responses[0].json() // json is not a function

Почему обработать можно только через then в самом map?

Почему тут без Promise.all тоже не обрабатывает респонсы?
.then(responses => Promise.all(responses.map(resp => resp.json())))

Comments

[Вадим]

Что делает await? - Дожидается асинхронной операции (промиса).
Что делает .map? - синхронно возвращает новый массив. (В вашем случае массив промисов)
Становится понятнее?

await map - не сработает.
await Promise.all(map) - сработает

[okonoshi]

Вадим, нет, не особо
в responses лежат, судя по консоль логу, точно такие же промисы как и при одиночном запросе, со статусом Respons. Так почему я не могу отдельно обратиться к этому респонсу?

[Вадим]

okonoshi, Вот Вы сами и ответили:

в responses лежат, судя по консоль логу, точно такие же промисы

У промисов нет метода .json
Этот метод есть у специального объекта, который возвращает промис от fetch.

То есть, грубо говоря:

await response[0].json -не сработает.

var a = await response[0]
var jsonA = await a.json()

- сработает.

[Сергей delphinpro]

не лезьте сразу в async/await

Сначала напишите ваш код на промисах. Потом перепишите на async/await.
Осознайте, что async/await – это всего лишь синтаксический сахар над промисами.

[okonoshi]

Вадим, я правильно понимаю?

const responses = await names.map((name) =>
    fetch(`https://api.github.com/users/${name}`)

Не срабатывает потому, что в массив попадает не результат фетча, а только запрос как он написан, из-за того что мар просто ждет выполнения асинхронного кода?

[Вадим]

okonoshi,

я правильно понимаю

Вы понимаете максимально не правильно.

await дожидается ПРОМИСА.
map возвращает МАССИВ.
и даже если внутри массива только промисы - это не сработает. Потому что нужен именно промис.
И метод Promise.all как раз и возвращает промис.

map не работает с асинхронщиной. Чтобы Вы не написали.

Это было в первом моём сообщении.
map это метод, который возвращает новый массив.

[Вадим]

okonoshi, Так, как Вы написали, можно сделать, но это будет плохая практика.

const responses = names.map(async (name) =>
    await fetch(`https://api.github.com/users/${name}`)

И тогда можно будет написать await response[0].json

Плохая практика потому, что сам массив, который вернёт map будет инициализироваться последовательно.
Каждый следующий элемент массива будет добавлен в массив, только после того, как закончится запрос из предыдущщего элемента. Что плохо, так как сильно увеличивает ожидание и выполнение кода из-за последовательности, а не паралельности запросов.

[Вадим]

okonoshi, Давайте по полочкам, может станет понятнее:

// Эти три записи не имеют никакой асинхронщины и в переменные попадёт НЕ промис.
var simple = await 1 // simple = 1
var complex = await [1] // complex = [1]
var preResolved = await Promise.resolve([1]) // preResolved = [1]

Поэтому, когда Вы пишитеawait Array.map() то в переменную попадает сам массив, который вернёт map. И await абсолютно пофигу что там внутри этого массива.

А вот если вот так:

var asyncData = await new Promise((resolve) => setTimeout(resolve, 1000, 'Я асинхронный резолв'))

То вот тут уже будет асинхронщина и в asyncData через 1000мс будет помещена строка 'Я асинхронный резолв'.
и можно следующей строкой написать asyncData.trim(), Так как в asyncData строка, а у строк есть такой метод.

И это то, что делает fetch. Он возвращает промис, который резолвится специальным объектом, у которого есть метод .json.

[Вадим]

okonoshi, например, запилим свой псевдо фетч, который резолвится придуманным специальным объектом:

function pseudoFetch () {
  return new Promise(resolve => {
    setTimeout(resolve, 1000, {answer: () => 'Объяснение промисов.'})
  })
}

var asyncData = await pseudoFetch()
console.log(asyncData.answer()) // через 1000мс выведет в консоль: 'Объяснение промисов.'

Answer 1

[Николай]

https://learn.javascript.ru/fetch

Comments

[okonoshi]

Я от сюда и пришел. Там нет ответа на этот вопрос.
Ну или я не догоняю какие то глубинные принципы работы.
Везде объяснения по типу - так работает, а вот так не работает. А почему - догадывайся сам

Answer 2

[Дмитрий]

await names.map — бессмысленная конструкция. Метод map возвращает массив, а не промис. Вам нужен Promise.all:

const responses = await Promise.all(names.map((name) => fetch(`https://api.github.com/users/${name}`)));