Question

目前，我正在尝试了解可观察的事物。我正在使用zen-observables。以下代码没有达到我的期望。

import Observable from "zen-observable";

const foobar = [];

Observable.from(foobar).subscribe(x => console.log(x));

foobar.push("test");
foobar.push("foobar");

setTimeout(() => {
  foobar.push("123");
}, 500);

“ 123”永远不会登录到控制台。那么，如何才能异步添加项目？

codesandbox example

Answer 1

您做对了所有事情。 0.5秒后将“ 123”值推入。您可以在此代码codesandbox example中看到123出现在控制台中。如果要使用setTimeout异步，则可以使用async-像这样codesandbox example2

已编辑

好，现在我更好地理解了您的问题之后，我会尝试回答您的问题：

首先，让我们更好地了解Observable -Observable是一种来自OOP方法的设计模式，Observable的主要用途是存储其他对象的数据（或在javascript中存储其他数据）），并且它们具有执行某些操作的侦听器功能。理解的好资源-http://anasfirdousi.com/understanding-observable-patterns-behind-observables-rxjs-rx.html
在您的情况下-
- 在第一种情况下：
  
  const observable = new Observable（observer => { myObserver =观察者； }）; //给他听的Observable变量。
- 在第二种情况下：
  
  const foobar = []; foobar.push（“ test”）; foobar.push（“ foobar”）; Observable.from（foobar）.subscribe（x => console.log（x））; //您只是向Observable添加了一个新的“列表”，但没有创建Obsrvable
结论-在第一种情况下，您被创建为“可观察”，并且您可以像下面的代码一样异步或同步地使用“订阅”方法：

从“ zen-observable”导入Observable；

让myObserver;

const observable = new Observable（observer => { myObserver =观察者； }）;

observable.subscribe（x => console.log（x））; myObserver.next（“ 1”）; myObserver.next（“ 2”）;

setTimeout（（）=> { myObserver.next（“ 3”）; }，3000）；

codesandbox example

如您所见，3将在3秒后打印，这意味着您可以同步和异步使用Observable（setTimeout使其异步）。您只能以这种方式使用它，因为以这种方式创建了Observable，而不仅仅是保存列表（例如您的问题代码）。

我希望它可以帮助您更好地了解

Answer 2

对于每个observable.subscribe调用，将创建一个新的订阅观察器。因此，您可以将其推送到一个观察者数组，以稍后通知所有观察者。

import Observable from "zen-observable";

const observers = [];

const observable = new Observable(observer => {
  observer.next("initial data");
  observers.push(observer);
});

observable.subscribe(x => console.log("first subscriber", x));
observable.subscribe(x => console.log("second subscriber", x));

function update(data) {
  observers.forEach(observer => observer.next(data));
}

setTimeout(() => {
  update("updated data");
}, 5000);

如何添加可观察的收集项目

2 个答案: