阅读 76

Promise vs Observable

Promise vs Observable

img

开发人员的世界一直在争论,JavaScript Promises还是 RxJS Observables哪个更好?这两个都可以为不同的项目带来很大的价值。很好地了解它们以及它如何使项目受益是一个好主意。但在我们开始进行一些比较之前,让我们快速概述一下它们。

什么是Promise

promise 是一个封装异步操作的结果的对象。

个 Promise 都有状态,状态有以下值:

  • 待处理的
  • 实现了一个值
  • 因某种原因被拒绝

在绝对牛逼创建承诺处于待定状态。只要后面的异步操作正在进行,promise 就会保持挂起状态。

然后,根据异步操作的完成方式,promise 状态更改为:

A) 已完成(当异步操作成功完成时)

B) 或被拒绝(当异步操作失败时)。

在 JavaScript 中,您可以使用特殊的构造函数创建一个 promise 对象

const promise = new Promise((resolve, reject) => {
  // Async operation logic here....
  if (asyncOperationSuccess) {
    resolve(value); // async operation successful
  } else {
    reject(error);  // async operation error
  }
});
复制代码

什么是Observable

*Observable*就是——你希望观察并采取行动的事物。Angular 使用观察者模式,这只是意味着 - 可观察对象被注册,其他对象观察(在 Angular 中使用 subscribe 方法)它们并在可观察对象以某种方式进行操作时采取行动。

为了使用 observable,Angular 使用了一个名为 Reactive Extensions ( RxJS )的第三方库。

让我们来看看如何在我们的 Angular 应用程序中使用*Observable*

import { Observable } from 'rxjs/Observable';// Create simple observable that emits three values 
   const myObservable = Observable.of(1, 2, 3); // Create observer object 
   const myObserver = { 
next: x => console.log('Observer got a next value: ' + x),             error: err => console.error('Observer got an error: ' + err),          complete: () => console.log('Observer got a complete notification')
 };         // Execute with the observer object    myObservable.subscribe(myObserver);    // Logs:   
 // Observer got a next value: 1   
 // Observer got a next value: 2    
// Observer got a next value: 3    
// Observer got a complete notification
复制代码

以下是本博文中介绍的主要区别:

饥饿与懒惰

**Promise 是饥饿的,**因此 立即执行,并且只执行一次。结果的计算在创建承诺时启动。没有办法重新开始工作。所有then子句(订阅)共享相同的计算。

const welcomePromise = new Promise(resolve => {  
console.log("In Promise executor fn"); 
 
 resolve("Welcome!");
}); console.log("Before calling the then method");
 
welcomePromise.then(console.log); // console output:
// In Promise executor fn
// Before calling the then method
// Welcome!
复制代码

Observables懒惰的,因为在消费者订阅之前不会执行。在subscribe()执行一次定义的行为,它可以再次被调用。每个订阅都有自己的计算。重新订阅会导致重新计算值。

import { Observable } from "rxjs";const welcomeObservable$ = new Observable(observer => {   console.log("In Observable producer fn");   observer.next("Welcome!"); 
  observer.complete();}); 
console.log("Before calling the subscribe method"); welcomeObservable$.subscribe(console.log); // console output:
// Before calling the subscribe method
// In Observable producer fn
// Welcome!
复制代码

异步与同步

即使立即解决,Promise 也始终是异步的。

const welcomePromise = new Promise(resolve => {  
console.log("In Promise executor fn"); 
 
 resolve("Welcome!");
});console.log("Before calling the then method");
 
welcomePromise.then(console.log);console.log("After calling the then method"); // console output:
// In Promise executor fn
// Before calling the then method
// After calling the then method
// Welcome!
复制代码

Observables 可以是同步,也可以是异步的

同步

import { Observable } from "rxjs";const welcomeObservable = new Observable(observer => {   console.log("In Observable producer fn");observer.next("Welcome!"); 
  observer.complete();}); 
console.log("Before calling the subscribe method"); welcomeObservable.subscribe(console.log);// console output:
// Before calling the subscribe method
// In Observable producer fn
// Welcome!
复制代码

异步

import { Observable } from "rxjs";const asyncObservable = new Observable(observer => {   console.log("In Observable producer fn");setTimeout(() => {observer.next("Async!"); 
  observer.complete();} , 1000)}); 
console.log("Before calling the subscribe method");asyncObservable.subscribe(console.log);console.log("After calling the subscribe method");// console output:
// Before calling the subscribe method
// In Observable producer fn
// After calling the subscribe method
// Async!
复制代码

单值与多值

Promise最常用于处理 HTTP 请求。在此模型中,您发出请求,然后等待单个响应。您可以确定不会有对同一请求的多个响应。

const numberPromise = new Promise((resolve) => { 
resolve(5);
}); numberPromise.then(value => console.log(value));
// will simply print 5
复制代码

Promise总是使用传递给**resolve**函数的第一个值来解析,并忽略对它的进一步调用:

const numberPromise = new Promise((resolve) => { 
resolve(5);
resolve(10);
});numberPromise.then(value => console.log(value));
// still prints only 5
复制代码

Observables允许你解析(或者,正如我们所说的,“发出”)多个值。

const numberObservable = new Observable((observer) => {    observer.next(5);   
observer.next(10);
});numberObservable.subscribe(value => console.log(value));
// prints 5 and 10
复制代码

取消

Observable 订阅是可取消的。取消订阅从接收更多值中移除侦听器,并通知订阅者函数取消工作。

const subscription = observable.subscribe(() => {// observer handles notifications});subscription.unsubscribe();
复制代码

Promises 不可取消。

结论

Observable 和 Promise 之间有很多不同之处。但主要区别是:

  • Observable is 惰性的, Promise is 饥饿的
  • Promise 总是异步的,而 Observable 可以是异步的,也可以是同步的
  • Promise 只能发出一个值,而 Observable 可以发出一个多个值。
  • Observable 订阅是可取消的,而 Promise 是不可取消的。

感谢您阅读这篇文章,希望您喜欢,请给个掌声。

文章分类
前端