Angular 5 - Promise 与 Observable - 性能上下文

Question

我有一个 Angular 5 站点，它从 REST API 接收数据，例如每个页面对 API 的 1-4 个请求，
发生的情况是请求有时需要很长时间(有时不需要)。

现在，所有请求都使用 在一个函数中执行。可观察 :

return this.http.post(url, {headers: this.header})
        .map(res => res.json())      
        .catch(this.handleError)

我的问题是 - 是否因为正在使用 Observable 而导致缓慢的过程发生？会 promise 性能会更好吗？
或者在性能上下文中 Observable 和 Promise 之间没有区别吗？

Answer 1

因为你的问题引起了我的兴趣。我创建了相同的测试，如下所示:

console.time('observable');
for(let i = 0; i < 10000; i++) {
  let user$ = of({
    name: 'yanis-git'
  });

  user$.subscribe(user => {
    // do something. Prefer not console.log because is ressource consuming.
  });
}
console.timeEnd('observable');

console.time('promise');
for(let i = 0; i < 10000; i++) {
  new Promise((resolve) => {
    resolve({
      name: 'promise'
    });
  }).then(user => {
    // do something. Prefer not console.log because is ressource consuming.
  });
}
console.timeEnd('promise');

结果看起来像这样(在您的浏览器/设置上可能会有所不同，但比例应该相同:

observable: 34.060791015625ms
promise: 103.4609375ms

编辑 :

内部具有异步特征的另一个实现:

console.time('observable');
for(let i = 0; i < 10000; i++) {
  let user$ = Observable.create((o) => {
    setTimeout(() => {
      o.next({
        name: 'observable'
      });
    });
  });

  user$.subscribe(user => {
    // do something. Prefer not console.log because is ressource consuming.
  });
}
console.timeEnd('observable');

console.time('promise');
for(let i = 0; i < 10000; i++) {
  new Promise((resolve) => {
    setTimeout(() => resolve({
      name: 'promise'
    }))
  }).then(user => {
    // do something. Prefer not console.log because is ressource consuming.
  });
}
console.timeEnd('promise');

结果很接近，但比赛是通过观察获胜的。

observable: 160.162353515625ms
promise: 213.40625ms

live sample

如果您想查看 stackblitz，请使用真实浏览器控制台查看计时器输出