angular - 了解 Promise 与 Observables 的结果

Question

promise :

实现

  getDataPromise(): any {
    let promise = new Promise((resolve, reject) => {
      resolve([
        { brand: 'iPhone', model: 'Xmax', price: '$1000' },
        { brand: 'Samsung', model: 'S10', price: '$850' }
      ]);
    });
    return promise;
  }

// promise call
getDataPromise.then((data) => { 
    console.log("Result: ", data);
});

结果是一个数组:

Result: [
  { brand: 'iPhone', model: 'Xmax', price: '$1000' },
  { brand: 'Samsung', model: 'S10', price: '$850' }
]

可观察

实现

  import { from } from 'rxjs';

  getDataObservable(): any {
    return from([
      { brand: 'iPhone', model: 'Xmax', price: '$1000' },
      { brand: 'Samsung', model: 'S10', price: '$850' }
    ]);
  }

// observable call
getDataObservable().subscribe((data) => {
    console.log("Result: ", data);
});

结果是按顺序排列的 2 个对象:

Result: { brand: 'iPhone', model: 'Xmax', price: '$1000' }
Result: { brand: 'Samsung', model: 'S10', price: '$850' }

试图了解其中的区别，浏览了在线资料，但仍然无法回答以下两个问题。

• 为什么结果不同？

• 如何从 observable 中获取结果作为数组(类似于 Promise)？

Answer 1

promise 结束 - 它解决(then)或拒绝(catch)，仅此而已。一个可观察的流值直到它结束(很多时候，它永远不会结束，你只是“失去兴趣” - 或者取消订阅值流)。

我喜欢按键示例 - 如果您使用基于按键事件的 promise 来解决/拒绝，您将只监听“下一个”按键，然后您必须创建一个新的 promise 来监听下一篇，依此类推。

使用可观察量，您只需要创建一个，它就会不断地向您传输值，直到您不再感兴趣(取消订阅)为止。

Promise:

const subscribeToKeyPress = () => {
  let resolve;
  document.addEventListener('keydown',function listener(e) {
      resolve(e);
      // unsubscribe from the event listener, otherwise you've got a memory leak
      document.removeEventListener('keydown',listener);
  });
  return new Promise(r => resolve = r);
}

subscribeToKeyPress().then(e => {
  // done, never to receive another result
});

#####
Observable:

const subscribeToKeyPress$ = () => fromEvent(document,'keypress);

const unsubscribe = subscribeToKeyPress$().subscribe(e => {
  // called continually on each keypress until you unsubscribe
});

unsubscribe(); // your callback function won't be called anymore, if you don't call unsubscribe when you're done, you've got a memory leak

#####
Callback Function - the simplest "observable"

const subscribeToKeyPress = callback => {
   const fn = e => callback(e); // this function will get called over and over until you unsubscribe
   document.addEventListener('keypress',fn);
   return () => document.removeEventListener('keypress',fn);
}

const unsubscribe = subscribeToKeyPress(e => {
  // called continually on each keypress until you unsubscribe
});

unsubscribe(); // your callback function won't be called anymore, if you don't call unsubscribe when you're done, you've got a memory leak

How to get the result from the observable as an array (similar to as in promise) ?

查看https://www.learnrxjs.io/operators/utility/topromise.html

也与toPromise相关:https://github.com/ReactiveX/rxjs/issues/2536

如果你的可观察对象没有“完成”(就像按键监听器一样)，toPromise将永远不会工作(除非你首先pipe(take(1))，但那就是对于新手来说有很多，无意冒犯，但来自一个充满希望的世界，可观察到的东西真的很难理解 - 根据我的个人经验 - 直到它们不再存在)。