В чем разница между Promise и Observable?

RedDeveloper
11.04.2022 20:00
В чем разница между Promise и Observable?

Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.

Что такое Promise?

Promise - это объект, который представляет собой возможный успех или неудачу асинхронной операции. А также его возвращаемое значение.

Вы когда-нибудь замечали, как компьютерное программирование заимствует многие термины из обычного языка?

В данном случае мы используем слово promise, которое в обычном английском языке означает заявление о том, что что-то будет или не будет сделано, согласно словарю.

Когда мы говорим об обещании в JavaScript, мы говорим об асинхронной операции, которая была обещана. Это означает, что обещание JavaScript - это обещанная операция, которая имеет различные состояния, такие как...

JavaScript Promise является основой асинхронного программирования в JavaScript. Он позволяет нам ставить асинхронные задачи в очередь в виде Promise и выполнять другие действия, пока мы ждем выполнения обещания.

Что такое Observable?

Согласно документации RxJS, Observable - это...

Проявление потребителя. Тип, который может иметь некоторые (или все) обработчики для каждого типа уведомлений: next, error и complete. Наличие всех трех типов обработчиков обычно позволяет назвать его "наблюдателем", а если в нем отсутствует какой-либо из обработчиков уведомлений, его можно назвать "частичным наблюдателем".

Observable - это слушатель, который подписывается на эмиттер события и срабатывает каждый раз, когда происходит новое событие.

Другими словами, Observable наблюдает за всем, что вы ему укажете, а затем срабатывает при выполнении определенного условия.

Как в этом примере - мы наблюдаем за нажатием определенной кнопки и затем выводим журнал в консоль.

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click').subscribe(() => console.log('Button clicked'));

В чем разница между Observable и Promise?

Promise предназначены для событий, которые происходят один раз. Observable предназначены для обработки событий, которые происходят несколько раз (или вообще не происходят) с течением времени.

И, конечно, Observable имеет множество других возможностей, которых нет у Promise, например, операторы трансформации и фильтрации и т.д.

Когда следует использовать Promise или Observable?

Если у вас есть одно асинхронное событие, которое нужно наблюдать, используйте Promise. Если у вас есть несколько событий в будущем, которые могут произойти или не произойти, используйте Observable.

Observables помогают в обеспечении параллелизма, а также в обработке событий, поступающих от таких вещей, как щелчки мыши или события таймера. Обещания обрабатывают одно событие за раз, что означает, что они лучше подходят для ситуаций, когда вы хотите убедиться, что что-то произойдет только один раз.

Promise хороши для разовых событий, а Observables - для потоков данных.

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML

15.07.2022 14:37

Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно является внешний метод. Это помогает сохранить код незагроможденным и организованным. Однако ситуация может диктовать использование двух других методов....

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly

16.05.2022 21:25

Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату, категорию, пол, местоположение, рейтинг, должность, страну, штат и т.д... и даже после заполнения всех этих данных вам будет предложена капча, которую...

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

18.04.2022 13:17

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно использовать выбранный нами фреймворк, и он становится основным подходом к каждому новому продукту. Однако существует и другой подход к разработке. Вы...

Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React

13.04.2022 15:26

Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей. Первое, что вам нужно сделать, это установить гем Flatpickr через npm. Вы можете найти эту информацию на их сайте или просто использовать следующий код:

Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса

08.04.2022 19:39

Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.

Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS

08.04.2022 16:00

У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то способ, мы все равно не получаем желаемого результата, и наш пользовательский интерфейс ломается. В этой статье я дам вам необходимые советы, которые...