Angular 6-简单易懂的英语解释 [英] Angular 6 - Observable explanation in plain English

问题描述

我正在寻找有关RXJS中的Observable的简单英语解释.

I'm looking for a plain English explanation of what an Observable is in RXJS.

它可以用于什么，以及任何有用的解释，包括视频链接，教程，用例，示例或任何其他内容.

What it can be used for, and any useful explanations either video links, tutorials, use cases, examples, or anything really.

到目前为止，我在Udemy，Todd Motto，Youtube和Angular官方网站上都找不到任何内容，如果可以的话，我只是想对上述内容进行基本解释.

So far nothing I have found on Udemy, Todd Motto, Youtube, Angular official website has clicked with me and I just want a basic explanation of the above if that is possible.

到目前为止，我所知道的是您可以与观察员一起订阅它们.只是另一种变量吗?

So far all I know is that you can subscribe to them with an observer. Is it just another kind of variable?

谢谢.

推荐答案

让我们从诺言开始

在Javascript中，Promise是一种用于优雅处理异步代码的常见模式.如果您不知道什么是诺言，请从那里开始.他们看起来像这样:

Lets start with promises

In Javascript, Promises are a common pattern used to handle async code elegantly. If you don't know what promises are, start there. They look something like this:

todoService.getTodos() // this could be any async workload
.then(todos => {
  // got returned todos
})
.catch(err => {
  // error happened
})

重要部分:

todoService.getTodos() // returns a Promise

让我们暂时忘记getTodos()的工作方式.要知道的重要一点是，许多库支持Promises，并且可以返回对HTTP等异步请求的承诺要求.

Lets forget about how getTodos() works for now. The important thing to know is that lots of libraries support Promises and can return promises for async requests like http requests.

一个Promise对象实现通过两种主要方法可以轻松处理异步工作的结果.这些方法是.then()和.catch(). then处理成功"结果，并且catch是错误处理程序.当then处理程序返回数据时，这称为resolving一个承诺，而当它向catch处理程序抛出错误时，则称为rejecting.

A Promise object implements two main methods that make it easy to handle the results of the async work. These methods are .then() and .catch(). then handles "successful" results and catch is an error handler. When the then handler returns data, this is called resolving a promise, and when it throws an error to the catch handler, this is called rejecting.

.then(todos => { // promise resolved with successful results })
.catch(err => { // promise rejected with an error }) 

最酷的是，then和catch也会返回承诺，因此您可以像这样链接:

The cool thing is, then and catch also return promises so you can chain them like this:

.then(todos => {
  return todos[0]; // get first todo
})
.then(firstTodo => {
  // got first todo!
})

这是要抓住的地方:承诺只能解决或拒绝一次

这对于诸如HTTP请求之类的事情是可以解决的，因为HTTP请求从根本上执行一次并返回一次(成功或错误).

This works out alright for things like http requests because http requests are fundamentally execute once and return once (success or error).

当您想要一种优雅的方式流异步数据时会发生什么?考虑视频，音频，实时排行榜数据，聊天室消息.能够使用promise设置一个处理程序，使其在流进来时继续接受数据，将是很棒的事情.

What happens when you want an elegant way to stream async data? Think video, audio, real-time leaderboard data, chat room messages. It would be great to be able to use promises to set up a handler that keeps accepting data as it streams in:

// impossible because promises only fire once!
videoService.streamVideo()
.then(videoChunk => { // new streaming chunk })

欢迎来到反应模式

简而言之:诺言是异步处理单个请求，而Observable则是异步处理流数据.

Welcome to the reactive pattern

In a nutshell: Promises are to async single requests, what Observables are to async streaming data.

它看起来像这样:

videoService.getVideoStream() // returns observable, not promise
.subscribe(chunk => {  // subscribe to an observable
   // new chunk
}, err => {
  // error thrown
});

看起来类似于诺言模式吧?可观测值和承诺之间的主要区别之一.可观察对象将数据发射"到订阅"中，而不是使用一次性使用.then()和.catch()处理程序.

Looks similar to the promise pattern right? One major difference between observables and promises. Observables keep "emitting" data into the "subscription" instead of using single use .then() and .catch() handlers.

Angular的http客户端库默认情况下返回observables，即使您可能认为http更适合一次性使用承诺模式.但是，关于反应式编程(如rxJS)的最酷的事情是，您可以使其他事件(例如单击事件或任意事件流)成为可观察对象.然后，您可以将这些流组合在一起，以完成一些非常酷的工作.

Angular's http client library returns observables by default even though you might think http fits the single use promise pattern better. But the cool thing about reactive programming (like rxJS) is that you can make observables out of other things like click events, or any arbitrary stream of events. You can then compose these streams together to do some pretty cool stuff.

例如，如果您想每次每单击刷新按钮并每60秒刷新一些数据，则可以设置以下内容:

For example, if you want to refresh some data every time a refresh button gets clicked AND every 60 seconds, you could set up something like this:

const refreshObservable = someService.refreshButtonClicked(); // observable for every time the refresh button gets clicked
const timerObservable = someService.secondsTimer(60); // observable to fire every 60 seconds

merge(
  refreshObservable,
  timerObservable
)
.pipe(
  refreshData()
)
.subscribe(data => // will keep firing with updated data! )

处理复杂过程的一种非常优雅的方法！响应式编程是一个很大的话题，但是这是一个很好的工具，可以尝试并可视化使用观测对象的所有有用方法组成很棒的东西.

A pretty elegant way to handle a complex process! Reactive programming is a pretty big topic but this is a pretty good tool to try and visualize all the useful ways you can use observables to compose cool stuff.

注意:这是未经测试的伪代码，仅用于说明目的

这篇关于Angular 6-简单易懂的英语解释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！