Понимание обещаний JavaScript для абсолютных новичков.
Если вы работали с серверными платформами, такими как Node.js, вы, должно быть, испытывали боль при работе с асинхронным кодом, особенно когда в вашем приложении слишком много I / O в нем. Чтобы справиться с асинхронным кодом, на картинке появляются обратные вызовы и обещания. Поскольку работа с функциями обратного вызова лишь усугубляет проблемы разработчика, обещания становятся более многообещающими для того, чтобы заставить код вести себя синхронным образом. В этой статье мы попытаемся разобраться в обещаниях как можно проще. Прежде всего, что такое обещание на самом деле? Официальная документация обещания гласит, что: -
Объект Promise представляет окончательное завершение (или сбой) асинхронной операции и ее результирующее значение.
Как указано в приведенном выше заявлении, после того, как асинхронная операция будет полностью обработана, у нас останутся два события: успех / сбой или более широко известный как разрешить / отклонить. Мы можем установить наш требуемый ответ в событии разрешения и запустить событие отклонения в случае какой-либо ошибки / исключения. Давайте углубимся в код, чтобы лучше понять суть вещей.
'use strict'
var promise = new Promise((resolve,reject) => {
resolve('Promises are meant to be broken.');
});
console.log(promise);
В проиллюстрированном выше примере мы использовали конструктор обещаний в соответствии с синтаксисом ES6, и он вернет два события, то есть разрешение / отклонение. Здесь мы разрешаем простую строку и после этого записываем обещание. Вот что вы получите в качестве результата -
Как видите, наше обещание было выполнено, но для получения его значения нам нужно использовать методы .then () /. Catch ().
'use strict'
var promise = new Promise((resolve,reject) => {
resolve('Promises are meant to be broken.');
});
promise.then((result) => {
console.log(result);
}).catch((error) => {
console.log(error);
})
Теперь, используя .then () и. catch (), мы можем вернуть значение вызванного обработчика, то есть разрешить / отклонить. Теперь мы можем получить желаемый результат следующим образом:
Простой? Не правда ли? Теперь давайте посмотрим, как мы можем работать с несколькими обещаниями. Рассмотрим два обещания обещание1 и обещание2, оба разрешают некоторый асинхронный код и перенастраивают данные. Нам нужно решить оба из них и получить желаемый результат. Давайте посмотрим, как -
'use strict'
var promise1 = new Promise((resolve, reject) => {
resolve('Inside Promise 1.');
});
var promise2 = new Promise((resolve, reject) => {
resolve('Inside Promise 2.');
});
Promise.all([promise1, promise2])
.then((result) => {
console.log(result);
}).catch((error) => {
console.log(error);
})
Здесь у нас есть два обещания обещание1 и обещание2, оба возвращающие строку соответственно. Чтобы решить их за один раз, мы используем метод Promise.all () и задаем массив обещаний в качестве аргумента. Обратите внимание, что даже если одно обещание было отклонено, метод Promise.all () напрямую переведет нас в блок .catch (). Это гарантирует, что все обещания работают нормально, и помогает при устранении ошибок, когда возникает необходимость. Это вернет следующий результат -
Теперь давайте пойдем дальше и попробуем разрешить одно обещание внутри другого. Примите во внимание следующий пример -
'use strict'
// First Promise
var promise1 = new Promise((resolve, reject) => {
var a = 15;
var b = 5;
var c = a + b;
//Resolving the sum obtained.
resolve(c);
});
// Second Promise
var promise2 = new Promise((resolve, reject) => {
var x = 5;
var sum = null;
// Obtaining the value returned by first promise.
promise1.then((result) => {
sum = result + x;
resolve(sum);
});
});
// Obtaining the sum returned by second promise.
promise2.then((finalResult) => {
console.log(finalResult);
}).catch((error) => {
console.log(error);
})
В показанном выше примере у нас есть два обещания, то есть обещание1 и обещание2. В обещании1 мы выполняем простой расчет сложения и передаем результат в событие resolve. Теперь в обещании2 мы разрешаем обещание1 и получаем его значение, например 20, и выполняем еще вычисление перед передачей окончательного результата. в событие resolve для обещания2. Наконец, мы можем использовать метод .then () для получения окончательного вывода, то есть -
Таким образом, мы можем получить четкое представление о том, что делать с несколькими обещаниями. Но в реальных приложениях мы просто не хотим играть с числами, верно? Нам необходимо использовать REST Apis, чтобы наши приложения продолжали работать, поэтому давайте посмотрим, как мы можем использовать GET API и разрешить его ответ.
'use strict'
fetch('https://jsonplaceholder.typicode.com/posts')
.then(res => {
res.json()
.then((data) => {
console.log(data);
})
}).catch((error) => {
console.log(error);
})
В приведенном выше примере мы используем общедоступный GET api и встроенный в JavaScript метод fetch. для этого. Сам метод выборки возвращает обещание по завершении запроса. Поэтому мы получаем его ответ с помощью переменной res. Теперь мы хотим получить данные в формате JSON с помощью метода res.json (), который, в свою очередь, возвращает другое обещание. Обещание, возвращаемое res.json (), может быть разрешено с помощью метода .then () и получения окончательного результата в переменной data. Вывод для указанного выше кода будет следующим:
Как видите, он возвращает массив данных, которые вы можете использовать в своем приложении. А как насчет блока .catch ()? Мы еще не тестировали это. Давайте сделаем ошибку, чтобы проверить это.
'use strict'
fetch('https://jsonplaceholdertypicode.com/posts')
.then(res => {
res.json()
.then((data) => {
console.log(data);
})
}).catch((error) => {
console.log('Checking for error - ', error);
})
Заметили, что мы здесь сделали? Мы просто настроили наш URL-адрес API так, чтобы точка (.) была удалена перед typicode, что делает его недействительным url, конечно. Итак, давайте проверим это и посмотрим, что мы получим взамен.
Видеть? мы пробились к блоку .catch (), используя недопустимый URL-адрес API. Таким образом, мы можем узнать об ошибках / исключениях, используя события reject и перехватив возвращенные данные в блоке .catch (). Таким образом, мы можем уменьшить боль, связанную с асинхронным кодом в Node.js, и заставить его работать так, как мы хотим, используя promises. Я надеюсь, что он сработал как ледокол и дал вам хорошее представление о том, как можно использовать обещания, чтобы ваш код работал синхронным образом. Если вы чувствуете, что извлекли пользу из этой статьи, и такие упрощенные статьи должны продолжать появляться, любезно поддержите меня, сделав пожертвование на paypal.me/topcoded. Чтобы прочитать больше таких упрощенных статей, посетите TopCoded. Увидимся, ребята, в следующем. Продолжайте кодировать! Продолжайте обещать! ;)
📝 Прочтите этот рассказ позже в Журнале.
👩💻 Просыпайтесь каждое воскресное утро и слушайте самые интересные истории из области технологий, ожидающие вас в вашем почтовом ящике. Прочтите информационный бюллетень« Примечательно в технологиях .
