练习：可观察，观察者和订阅

撕裂，完成通知

让我们说我们要在两秒钟后发送完整的通知，并消耗发出的完整通知。

还要在拆解发生时进行一些清理。我们该怎么做？

import { Observable } from 'rxjs';

const $observable = new Observable((subscriber) => {
  subscriber.next('First');
  setTimeout(() => {
    subscriber.next('After one sec');
  }, 1000);
  setTimeout(() => {
    subscriber.next('After two sec');
    subscriber.complete();
  }, 2020);

  return () => {
    console.log('Teardown');
  };
});

const observer = $observable.subscribe({
  next: (value) => console.log(value),
  complete: () => console.log('Completed'),
});

我们首次看到，当我们创建一个新的观察值时，我们可以返回一个函数，并且将在拆卸过程中调用此功能。

这确实很方便，因为在此步骤中，我们可以清理逻辑并进行所需的更改。

错误通知

这次让我们看逻辑，当错误发出时会发生什么

import { Observable } from 'rxjs';

const observable$ = new Observable<string>((subscriber) => {
  console.log('Observable executed');
  subscriber.next('Alice');
  subscriber.next('Ben');
  setTimeout(() => {
    subscriber.next('Charlie');
    subscriber.error(new Error('Something went wrong :('));
  }, 2000);

  return () => {
    console.log('Teardown');
  };
});

console.log('Before subscribe');
observable$.subscribe({
  next: (value) => console.log(value),
  complete: () => console.log('Completed'),
  error: (err: Error) => console.log(err.message),
});
console.log('After subscribe');

退订

让我们创建一个间隔，每2秒发出一个值，然后我们向其订阅7秒，然后使用拆卸功能清洁间隔

import { Observable } from "rxjs";

const interval$ = new Observable<number>(subscriber => {
  let counter = 1;

  const intervalId = setInterval(() => {
    console.log('Emitted', counter);
    subscriber.next(counter++);
  }, 2000);

  return () => {
    clearInterval(intervalId);
  };
});

const subscription = interval$.subscribe(value => console.log(value));

setTimeout(() => {
  console.log('Unsubscribe');
  subscription.unsubscribe();
}, 7000);

让我们保持联系

嘿，如果您读了这么远，请非常感谢。
我希望您保持联系以获取更多甜蜜的内容。
请在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