Promise result как достать
Ранее мы рассмотрели, как из функции промиса мы можем передать во вне результат асинхронной операции:
Теперь получим это значение. Для получения результата операции промиса применяется функция then() объекта Promise :
Первый параметр функции — onFulfilled представляет функцию, которая выполняется при успешном завершении промиса и в качестве параметра получает переданные в resolve() данные.
Второй параметр функции — onRejected представляет функцию, которая выполняется при возникновении ошибки и в качестве параметра получает переданные в reject() данные.
Функция then() возвращает также объект Promise .
Так, получим переданные данные:
То есть параметр value здесь будет представлять строку «Привет мир!» , которая передается в resolve(«Привет мир!») . В итоге консольный вывод будет выглядеть следующим образом:
При этом нам необязательно вообще передавать в resolve() какое-либо значение. Возможно, асинхронная операция просто выполняется и передает во вне никакого результата.
В данном случае функция в промисе вычисляет сумму чисел x и y и выводит результат на консоль.
Метод Promise.resolve
Иногда требуется просто вернуть из промиса некоторое значение. Для этого можно использовать метод Promise.resolve() . В этот метод передается возвращаемое из промиса значение. Метод Promise.resolve() возвращает объект Promise:
Определение промиса через функцию
Нередко промис определяется через функцию, которая возвращет объект Promise. Например:
Здесь функция sum() принимает два числа и возвращает промис, который инкапсулирует операцию сумму этих чисел. После вычисления сумма чисел передается в resolve() , соответственно мы ее затем можем получить через метод then() . Определение промиса через функцию позволяет нам, с одной стороны, при вызове функции передавать разные значения. А с другой стороны, работать с результатом этой функции как с промисом и настроить при каждом конкретном вызове обработку полученного значения.
Результат работы программы:
Однако, что если у нас совпадает принцип обработки полученного из асинхронной функции значения?
В этом случае логика обработки будет повторяться. Но поскольку метод then() также возвращает объект Promise, то мы можем сделать следующим образом:
Гибкая настройка функции
А что, если мы хотим, чтобы у программиста был выбор: если он хочет, то может определить свой обработчик, а если нет, то применяется некоторый обработчик по умолчанию. В этом случае мы можем определить функцию обработчика в качестве параметра функции, а если он не передан, то устанавливать обработчик по умолчанию:
Вернуть данные из Promise и сохранить их в переменной после вызова API
Я довольно новичок в Promises и нашел здесь много примеров, как получить доступ к фактическому значению, которое всегда делается с console.log . Но моя цель — сохранить результат в переменной и работать с ней.
Этот код работает. Можете ли вы помочь мне переписать это, что функция getdata() позволяет мне сохранить результат в переменной. Возврат не работает, так как я получу еще одно ожидающее обещание.
2 ответа
Сделать это можно так:
Конечно, вы также хотели бы обработать сценарий, когда запрос не удался, поэтому вы также можете связать .catch() в цепочку. С другой стороны, если у вас настроен процесс сборки, вы можете использовать async и await , чтобы вы могли сделать:
Это должно быть в функции, помеченной как async
Ну, сначала нам нужно объявить переменную, скажем, temp. Затем используйте API выборки для запроса нашего запроса с URL. Если состояние сервера равно 200, он вернет обещание, нам нужно использовать метод then , передавая любой аргумент (res, response, r any . ) и затем функцию жирной стрелки ( => ) так что мы можем сделать ответ в формате JSON. После этого нам нужно использовать другой метод then , чтобы вернуть вывод json и присвоить значение нашей объявленной временной переменной.
Но если есть какая-либо ошибка, например, 500, 400, 404 ошибка сервера, нам нужно использовать метод catch с аргументом err и утешить его.
JavaScript Promise с примерами
По умолчанию код в JavaScript выполняется последовательно (в одном потоке, синхронно). То есть таким образом, когда каждая следующая операция ждёт завершения предыдущей.
На сайте очень часто встречаются задачи, для выполнения которых требуется значительное время. Если их реализовать с помощью синхронного кода, то это может привести к тому, что страницы будут подвисать (т.е. с ними нельзя будет взаимодействовать некоторое время). Таким образом, возможно возникновение негативного пользовательского опыта при использовании такого сайта и таких сценариев конечно лучше не допускать.
Чтобы этого избежать необходимо использовать асинхронный код. Он в отличие от синхронного выполняется в фоновом режиме и не блокирует основной поток. Т.е. код, расположенный после него выполняется сразу же, не дожидаясь его завершения.
Асинхронный код в JavaScript может быть написан разными способами : с помощью обратных вызовов, promise (обещаний) и ключевых слов async/await .
В этой статье рассмотрим, как это сделать с помощью promise .
Promise (промисы, обещания) – это специальный объект и набор методов в JavaScript для удобного написания асинхронного кода.
В отличие от обратных вызовов промисы позволяют решать асинхронные задачи значительно проще без создания большого количества вложенностей одних функций в другие.
Изучение промисов начнём с рассмотрения примера из реальной жизни .
Допустим, папа обещает дать 100$, если вы сдадите завтрашний экзамен на хорошо или отлично.
В данный момент вы находитесь в состоянии ожидания, т.к. не знаете какую отметку вы получите, а следовательно, не знаете получите ли вы бонус в размере 100$.
Но как только вы получите отметку по экзамену, обещание завершится. Далее в зависимости от того успешно оно завершилось или нет будет зависеть получите ли вы 100$ или нет.
На JavaScript этот пример с помощью promise реализуется следующим образом:
А теперь разберём как всё это работает, и начнём с создания промиса.
Создание промиса
Начинается процесс написания промиса с его создания. Осуществляется это с помощью конструктора, т.е. с new Promise() :
Конструктор промиса принимает 2 аргумента, которые являются функциями. Первый аргумент обычно называют resolve , а второй – reject . Внутрь промиса помещают асинхронный код, можно конечно и синхронный, но тогда в этом не будет смысла.
Промис завершает своё выполнение, когда вызывается функция resolve() или reject() .
Функцию resolve() вызывают обычно в том месте кода, в котором асинхронная операция должна завершиться успешно. А функцию reject() – там, где она должна завершиться с ошибкой.
Состояния, в которых может находиться промис
Промис начинается с состояния ожидания ( state: «pending» ). Оно говорит о том, что он ещё не выполнен (результат undefined ).
Промис завершается после вызова resolve() или reject() . При этом его состояние переходит соответственно в выполнено ( state: «fulfilled» ) или отклонено ( state: «rejected» ).
Внутрь функций resolve() или reject() можно поместить аргумент, который затем будет доступен соответственно в then() или catch() .
Когда passexam равен true , промис успешно завершится через 5 секунд посредством вызова функции resolve() . А так как промис завершился успешно, то будет вызван метод then() .
Если значение константы passexam поменять на false , то промис завершится с ошибкой через 5 секунд с помощью вызова функции reject() . А так как в этом случае промис завершился с ошибкой, то, следовательно, будет вызван catch() .
Методы промисов
У каждого промиса есть определённый набор методов, которые мы можем использовать:
- then – выполняется, когда промис завершился успешно (после вызова функции resolve() );
- catch – вызывается, если промис завершается ошибкой (после вызова reject() );
- finally – выполняется в любом случае после завершения промиса, вне зависимости от конечного состояния.
Пример с использованием всех трёх методов:
При этом then() позволяет обработать не только успех, но и ошибку. Для этого необходимо передать функцию в качестве второго аргумента.
Второй аргумент указывать не обязательно, в этом случае он будет реагировать только на успех:
Для того чтобы получить значение из промиса в методах then() и catch() как уже было отмечено выше необходимо его передать в функции resolve() и reject() .
Цепочка промисов
Цепочка промисов – это простая концепция, в основу которой положено то, что методы промисов тоже в качестве результата возвращают промис. А так как они возвращают промис, то мы для них в свою очередь тоже можем вызвать методы и т.д. Таким образом, мы можем создавать цепочку из промисов, каждый из которых выполняется только после того как завершился предыдущий.
По простому цепочка промисов позволяет очень компактно записать код для последовательного выполнения нескольких асинхронных задач, каждая из которых должна выполняется после завершения предыдущей.
Пример цепочки промисов:
- сначала выполняется первый промис, который успешно завершится через 3 секунды со значением 2;
- после этого выполнится метод then() , который выведет в консоль значение переменной value , которое равно аргументу, переданному в resolve() и возвратит в качестве результата новый промис; он также как и предыдущий успешно завершится через 3 секунды со значением value * 2 ;
- затем выполнится следующий then() , он выполнит действия аналогично предыдущему then() ;
- дальше выполнится последний then() , который просто выведет в консоль значение параметра value .
Promice.all() и Promise.race()
Promice.all() и Promise.race() – это статические методы Promice , которые принимают на вход массив промисов и возвращают новый промис.
В случае с Promice.all() промис завершится когда завершатся все промисы в массиве.
При использовании Promise.race() промис завершится, как только выполнится первый промис из массива.
Задачи
1. Асинхронный код, ниже реализованный с использованием функций обратного вызова, необходимо переписать через промисы:
2. Напишите функцию, с помощью которой можно будет выполнять различные действия с задержкой.
3. Перепишите код для динамической загрузки скриптов в определенном порядке через промисы: