Асинхронный JS №1
then(), catch() и finally() являются по сути функциями-обработчиками, которые вы можете присоединить к конкретному экземпляру объекта обязательства для прослушивания его событий.
— Метод .then() объекта Promise добавляет обработчик, или обработчики, вызываемые когда объект Promise имеет состояние fulfilled (успешное выполнение), или rejected (выполнение отклонено).
— Метод .catch() объекта Promise добавляет обработчик или обработчики, которые будут вызваны при изменении состояния объекта Promise на rejected (выполнение отклонено).
Метод .catch() ведет себя аналогично вызову метода then() с аргументами (undefined, onRejected), он реализован таким образом, что внутренне вызывает метод then() с этими аргументами (является сокращенным вариантом метода — алиасом).
— Метод .finally() объекта Promise добавляет обработчик, который будет вызван вне зависимости от того с каким результатом объект Promise был выполнен (rejected — выполнение отклонено, или fulfilled — успешное выполнение).
Метод .finally() позволяет избежать дублирования кода в обработчиках, вызываемых когда объект Promise имеет состояние fulfilled (успешное выполнение), или rejected (выполнение отклонено), что обеспечивает возможность выполнить определенный код, когда обещание было обработано, независимо от его состояния.
В вопросе мы используем метод fetch для отправки запроса на удаленный сервер и получения данных в виде JSON. Метод fetch возвращает промис, который может обрабатываться с помощью метода then.
В примере используется 2 цепочки then, чтобы обработать ответ от сервера и вывести данные в консоль.
В итоге выполнение этого кода не блокирует выполнение основного скрипта, а позволяет ему выполняться в фоновом режиме, пока данные не будут получены.
Не хватает async перед function.
В JavaScript, асинхронный код — это код, который выполняется в фоновом режиме, не задерживая выполнение основного скрипта.
В примере сразу используется fetch для получения данных с удаленного API. Вызов await приостанавливает выполнение функции, пока fetch не вернет ответ. Как только ответ получен, мы используем await для ожидания преобразования ответа в JSON. В конце выводятся данные в консоль.
Правильный ответ const data = await response.json();
response.json() – декодирует ответ в формате JSON.
Ключевое же слово await заставляет интерпретатор JavaScript ждать до тех пор, пока промис справа от await не выполнится. После чего оно возвращает его результат, и выполнение кода продолжается.
Обратите внимание, хотя await и заставляет JavaScript дожидаться выполнения промиса, это не отнимает ресурсов процессора. Пока промис не выполнится, JS-движок может заниматься другими задачами: выполнять прочие скрипты, обрабатывать события и т.п.
В JavaScript EventLoop есть понятие приоритета.
Порядок, в котором выполняются задачи, определяется приоритетом задач. Задачи группируются в две категории: микрозадачи и макрозадачи.
Задачи с более высоким приоритетом называются микрозадачами. Например: Promise, ObjectObserver, MutationObserver, process.nextTick, async/await. Они выполняются как можно скорее.
Задачи с более низким приоритетом называются макрозадачами. Например: setTimeout, setInterval и XHR. Выполняются после завершения всех микрозадач.
Также независимо от того, сколько существует слоев вызовов функций, базовые принципы остаются неизменными:
— Сначала выполняется синхронный код, а затем асинхронный.
— Синхронный код выполняется в том порядке, в котором он был вызван.
В примере получаем что строка кода ‘ number = 9 ‘ сразу же изменяет значение number с 3 на 9, так как это синхронный код. Поэтому, когда функция, переданная в setTimeout выполняется, она использует последнее значение number, т.е. 9.
В вопросе мы получаем объект Promise, который представляет асинхронный запрос к URL, который был указан в fetch.
После получения промиса обычно используют JSON для извлечения необходимых данных.
Объект Promise предоставляет методы для обработки выполнения запроса, такие как then и catch, которые можно использовать для установки обработчиков успешного выполнения или ошибки, соответственно.
Метод finally() в JavaScript предоставляет возможность выполнить какой-то код после того, как Промис был завершен, будь то успешным или неудачным выполнением.
В примере срабатывает .then (в resolve было передано ‘World’) и .finally, поэтому получаем в консоле:
World
Промис выполнен
Когда движок JavaScript выполняет скрипт, он выполняет синхронные операции сверху вниз и затем переходит к асинхронным операциям. Поэтому script end выводится первым, а затем log1 и log2 выводятся в порядке, в котором они были добавлены в очередь.
Правильный ответ text.catch(err => console.log(err.message));
В наше случае метод .catch() перехватывает исключение, вызванное методом reject(), и печатает сообщение ошибки в консоль.
Ответом является 1 3 2.
«2» будет выведена последней, потому что она является результатом выполнения метода resolve внутри Promise. Метод resolve выполняется после того, как промис был создан и выполнены все операции внутри него. Потом, когда выполнение Promise завершено, он вызывает функцию в методе .then, которая выводит значение результата в консоль.
Правильный ответ .catch(error => console.error(error.message));
Если функция успешно выполняется, вызывается resolve с переданными данными. В нашем случае обработка успеха не производится.
Если же функция выполнена с ошибкой, вызывается reject с сообщением об ошибке.
Для обработки ошибок в Promise мы используем метод catch().
Внутри функции getData() сразу в переменную data записывается объект, потому что это синхронный код. Далее срабатывает асинхронная функция setTimeout(), которая перезаписывает свойство name. В итоге получаем в консоле именно Tom.
Правильный ответ Promise.race([firstPromise, secondPromise])
Метод Promise.race() принимает массив промисов и возвращает первый исполненный (resolved) или первый отклоненный (rejected) промис.
В вопросе мы создаем два промиса, и через Promise.race() определяем, какой из них сначала исполнится. Ответ выводится в консоль.
Правильный ответ Promise.all([promise1, promise2, promise3])
В вопросе создаётся три промиса promise1, promise2 и promise3. Далее Promise.all принимает массив промисов и возвращает один промис (только в том случае, когда будут готовы все 3 принятых). Далее в метод .then передаётся массив с результатами, которые выводятся в консоль.
Правильный ответ dataFetch().catch(error => console.log(error.message));
В примере, если возникнет ошибка, то в catch блоке мы выведем сообщение об ошибке, а затем выбросим исключение с текстом Custom error.
Получается при необходимости мы можем указать свой текст ошибки, выбрасывая исключение с желаемым текстом внутри catch блока.