Как использовать результаты async функции синхронно?

Question

[Soul1]

Имеется список url-адресов. Нужно на каждый адрес отправить request запрос, получить ответ и сохранить его в массив. На выходе должен получиться массив ответов. Как реализовать такое с помощью асинхронной функции?
Через XMLHttpRequest реализовал (синхронные выполнение), всё отлично отрабатывает, но запросы выполняются по очереди и скорость выполнения скрипта оставляет желать лучшего. Насколько я понимаю fetch умеет выполнять такое асинхронно, но не пойму как на выходе получить массив ответов не используя await. С await он отрабатывает как надо, но скорость такая же как и у XMLHttpRequest, т.е. если я ничего не путаю с помощью await мы принудительно синхронизируем выполнение функции, т.е. снова теряем скорость?

Функция:

spoiler

async function get_response(request_url_list) {
    var main_list = []
    //alert(JSON.stringify(response))
    for (var i = 0; i < request_url_list.length; i++) {
        let response = await fetch(request_url_list[i]);
        if (response.ok) { // если HTTP-статус в диапазоне 200-299 получаем тело ответа 
            let json = await response.json();
            main_list.push(JSON.stringify(json))
        } 
        else {
            alert("Ошибка HTTP: " + response.status);
        }
    }
    return main_list
}

Её вызов и сохранение результата:
var main_list = await get_response(request_url_list)

Comments

[Lynn «Кофеман»]

https://caolan.github.io/async/v3/docs.html#everyLimit

Answer 1

[Pavel Shvedov]

Array.prototype.map + Promise.all

Answer 2

[Владимир]

Массив URL преобразуете в массив fetch(url)
Чтобы получить массив результатов из массива промисов погуглите про Promise.all

Comments

[Soul1]

Вы видимо про эти ссылочки говорите, но я делаю ровно по примерам оттуда и ничего не получается
https://learn.javascript.ru/promise-api
https://developer.mozilla.org/ru/docs/Web/JavaScri...

[Soul1]

Тут возвращается массив промисов, как и должно.
let requests = request_url_list.map(url => fetch(url));

А вот тут по идее переменной должен быть присвоен массив результатов выполнения промисов
var main_list = Promise.all(requests)

Но alert(main_list) возвращает промис

[Rsa97]

Soul1, await Promise.all(requests);
Но, если хоть один из запросов вернёт ошибку, то выполнение всех запросов прекратится.

[Владимир]

Soul1,
https://developer.mozilla.org/en-US/docs/Web/JavaS...
В then получишь результат или ставь await перед Promise.all

[Владимир]

Rsa97, Чтобы не получить ошибку, нужно для fetch написать обработчик ошибок.

есть еще https://developer.mozilla.org/en-US/docs/Web/JavaS...
но тут он не нужен от слова совсем, нужно результат fetch обработать

[Soul1]

Поставил await, теперь возвращает массив объектов response. Через .json() как и через .text() они возвращают пустой объект.

[Soul1]

let requests = request_url_list.map(url => fetch(url))
var main_list = await Promise.all(requests)
for (var i = 0; i < main_list.length; i++) {
    alert(main_list[i])
}

[Soul1]

Тут ошибку сам нашёл, нужно было сразу к тексту приводить:

let requests = request_url_list.map(url => fetch(url).then(result => result.text()))
var main_list = await Promise.all(requests)
for (var i = 0; i < main_list.length; i++) {
    alert(main_list[i])
}

Теперь всё работает корректно и скрипт просто летает, а не как раньше по 10 секунд ждать.
Всем огромное спасибо за помощь!

[Владимир]

Soul1, Ну если помог, отметь решением.
ТОлько у тебя нет проверки fetch на ОК, почитай по нему документацию, в отличии от XMLHttpRequest он в ошибку не сваливается ни при 400 ни при 500

[Soul1]

Владимир, в прошлой функции была проверка на ОК, в эту тоже добавлю, спасибо!

Answer 3

[Loli E1ON]

Они в любом случае будут выполнятся по очереди. Async/Await это лишь обертка для удобной работы с промисами.
Почитайте про цикл событий и асинхронность в JS, ну и про промисы заодно.