Angular: обещания против наблюдаемых

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

Прежде всего, когда мы хотели бы использовать обещания и наблюдаемые объекты? Как мы узнаем, у каждого из них есть разные варианты использования, но на высоком уровне мы хотим использовать эти идеи, когда нам нужно выполнить асинхронное действие.

Что такое асинхронное действие?

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

Быстрым примером этого может быть вызов API GitHub и ожидание получения некоторых данных. Мы не хотим застрять на полосе загрузки в нашем браузере, пока ждем, когда эти данные вернутся к нам. Мы хотим, чтобы страница могла отображаться для пользователя, а затем, в конечном итоге, отображать данные. В этом сила асинхронного кода.

Итак, теперь, когда мы понимаем, что такое асинхронные действия и в чем их основная цель, давайте вернемся к промисам и наблюдаемым объектам.

Когда мы хотели бы использовать обещание или наблюдаемое?

Промис удобен, когда нам нужно выдать только одно значение — например. один объект JSON. Если нам нужно определенное количество пользовательских коммитов GitHub, мы можем использовать обещание в воображаемом сервисе GitHub в нашем приложении Angular, чтобы сделать вызов API и получить количество коммитов. Мы можем использовать метод .then, чтобы установить эти данные в свойство нашего компонента, который будет отображаться в шаблоне.

Наблюдаемое полезно, когда мы имеем дело с несколькими значениями в течение определенного периода времени, например. несколько объектов JSON возвращаются в нашу службу GitHub. С обещанием мы можем быть ленивыми и просто ожидать чего-то в ответ, прежде чем обрабатывать обещание с помощью .then . Однако, используя наблюдаемую, мы не получим никаких данных, пока не .subscribe перейдем к нашей наблюдаемой.

Следует отметить, что обещание не может быть отменено, поскольку оно извлекает один фрагмент данных. С другой стороны, наблюдаемая извлекает непрерывный поток данных и может быть отменена с помощью метода .unsubscribe(). Лучшая практика работы с Angular — всегда отписываться от наших наблюдаемых, чтобы избежать утечек памяти.

Наконец, при использовании наблюдаемого нам предоставляется множество методов, таких как .map, .forEach и .reduce, и это лишь некоторые из них. Это имеет смысл, исходя из того, что мы узнали. Map, forEach и Reduce используются в массивах, и, поскольку мы работаем с потоком данных, нам, конечно, нужны эти знакомые друзья.

Удачного кодирования!