入门

快速开始

可观察物就像数据或事件生成器一样存储在内部的逻辑。

他们生成的数据可以具有各种来源，例如值，DOM事件，计时器等。

您想要的任何东西都可以变成可观察的

让我们说我们有一个可观察的，现在我们需要以某种方式开始执行数据。

编码示例

可观察到的名称末尾的$符号作为命名实践，这样我们就可以轻松地确定哪个变量实际上可观察到

首先让我们看到我们将使用的功能。

外部.ts

import { Observable, of } from "rxjs";

export const name$ = of('Alice', 'Ben', 'Charlie');

export function storeDataOnServer(data: string): Observable<string> {
  return new Observable(subscriber => {
    setTimeout(() => {
      subscriber.next(`Saved successfully: ${data}`);
      subscriber.complete();
    }, 5000);
  });
}

export function storeDataOnServerError(data: string): Observable<string> {
  return new Observable(subscriber => {
    setTimeout(() => {
      subscriber.error(new Error('Failure!'));
    }, 5000);
  });
}

我们可以认为可观察到的函数，当我们调用它时，它会发出一些值。

index.ts

import { name$, storeDataOnServer, storeDataOnServerError } from './external';

name$.subscribe();

这里可能会发出一些数据，但是由于我们有一个处理程序，所以我们无法抓住它

import { name$, storeDataOnServer, storeDataOnServerError } from './external';

name$.subscribe((value) => console.log(value));

// Mike
// Brandon
// Alice

我们可以写一个函数，该函数模拟数据从远程服务器

storeDataOnServer('Some value').subscribe((value) => console.log(value));

我们也有一个像我们投掷错误
的版本

storeDataOnServerError('Some value').subscribe((value) => console.log(value));

这将使我们的JavaScript失败，因为我们没有处理错误。

对于可观察到的错误处理，我们有2个版本

首先是不推荐的版本（仍然像这样编写的许多项目）

storeDataOnServerError('Some value').subscribe(
   (value) => console.log(value),
   (err) => console.log('Error when saving:', err.message)
 );

和现代版本可观察的对象

storeDataOnServerError('Some value').subscribe({
  next: (value) => console.log(value),
  error: (err) => console.log('Error when saving:', err.message),
});

整个代码：

import { name$, storeDataOnServer, storeDataOnServerError } from './external';

// name$.subscribe((value) => console.log(value));

// storeDataOnServer('Some value').subscribe((value) => console.log(value));
// storeDataOnServerError('Some value').subscribe((value) => console.log(value));

// storeDataOnServerError('Some value').subscribe(
//   (value) => console.log(value),
//   (err) => console.log('Error when saving:', err.message)
// );

storeDataOnServerError('Some value').subscribe({
  next: (value) => console.log(value),
  error: (err) => console.log('Error when saving:', err.message),
});

让我们保持联系

嘿，如果您读了这么远，请非常感谢。
我希望您保持联系以获取更多甜蜜的内容。
请在Dev.To和其他频道中订阅（ð°特别twitter）

twitterðhttps://twitter.com/barisbll_dev
LinkedIn - https://www.linkedin.com/in/barisbll-dev/
githubð»ð»https://github.com/barisbll
中ð°https://medium.com/@barisbll