Хобрук: Ваш путь к мастерству в программировании

Одна асинхронная функция, которая делает несколько выборок и возвращает результаты?

Я пытаюсь написать асинхронную функцию, которая выполняет несколько выборок, ждет завершения всех, а затем возвращает результаты JSON в виде массива. Это то, что у меня есть до сих пор:

файл1.js

const searchResults = await Api.search(searchText);

api.js

async function search(searchText) {
    return util.executeFetchAll([
        `/searchA/${searchText}`,
        `/searchB/${searchText}`,
        `/searchC/${searchText}`
    ]);
}

util.js

async function executeFetchAll(urls) {
    const promises = urls.map(url => fetch(url));
    const responses = await Promise.all(promises);

    debugger;
}

Когда выполнение приостанавливается в отладчике и я проверяю responses с помощью инструментов разработчика Chrome, это правильный массив из 3 объектов Response, но если я проверяю responses[0].json(), он странным образом возвращает в консоли объект Promise {<pending>}.

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

Спасибо.


Ответы:


1

response.json() вернуть обещание! см.: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Таким образом, вы можете ожидать их примерно так:

await Promise.all(responses.map(r => r.json()));
28.09.2018
  • Спасибо. Но я думаю, мне интересно, почему обещания все еще остаются в ожидании после моего звонка await Promise.all(...). Почему в следующей строке, где мы нажмем отладчик, они все еще будут отображаться как ожидающие? Разве они не должны быть разрешены к моменту завершения строки ожидания? 28.09.2018
  • Кроме того, извините, я только что заметил, что я пытаюсь назначить Promise.all для responses, но вы используете responses в Promise.all в качестве аргумента. Можете ли вы уточнить в контексте моего примера кода порядок выполнения? Спасибо. 28.09.2018
  • Сначала вы ждете ответа от сервера (выборка), затем вы ждете преобразования полезной нагрузки из json (.json). Обе функции возврата возвращают обещание. Позвольте мне переписать мой пример, чтобы помочь вам: const responses = await Promise.all(promises); const jsonPromises = responses.map(r => r.json()); const objects = await Promise.all(jsonPromises); 28.09.2018
  • Спасибо, что переписали! 28.09.2018
  • Попробовал ваш обновленный пример из вашего предыдущего комментария, но objects в итоге получился: [false, false, false]. 28.09.2018
  • Я протестировал код с помощью простого API urls = ['https://jsonplaceholder.typicode.com/todos/1', 'https://jsonplaceholder.typicode.com/todos/1', 'https://jsonplaceholder.typicode.com/todos/1'];, и он работает. Ваш API возвращает, вероятно, ложь. Используйте вкладку сети консоли разработчика, чтобы увидеть, что вам отправил сервер. 28.09.2018
  • Ты прав. Я предположил, что мой API возвращает правильные значения. Плохое предположение. Так что это работает. Несмотря на это, я все еще смущен тем, что responses не имеет 3 разрешенных промисов после await Promise.all(...). Почему они до сих пор находятся на рассмотрении, а мне пришлось бы await второй раз? 28.09.2018
  • Новые материалы

    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..

    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..

    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..

    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..

    Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
    Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..

    Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
    Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..

    стройный-i18следующий
    Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..