RxJS Observable如何取消Promise？为何包裹后可退订活跃流？

Great question! This gets to one of the key differences between Promises and RxJS Observables: built-in support for cancellation via unsubscription. Let’s break down exactly how this works.

First, Why Promises Can’t Be Canceled #

Promises are inherently eager and one-time execution units. Once you create a Promise, its executor function runs immediately, and there’s no built-in way to stop it mid-execution. Even if you ignore the resolved/rejected value, the underlying operation (like a timeout or network request) will still finish running—you just won’t react to its result.

How Observables Implement Unsubscription #

Observables solve this with two core mechanisms: lazy execution and subscription cleanup functions.

1. Lazy Execution (Subscription Triggers Execution) #

Unlike Promises, Observables don’t run their logic until you call subscribe() on them. This means you have full control over when the underlying operation starts. When you subscribe, RxJS creates a Subscription object that acts as a handle for that specific subscription.

2. Cleanup Functions: The Heart of Cancellation #

When you define an Observable (either via new Observable() or using RxJS operators), you can return a cleanup function from the Observable’s executor. This function runs automatically when:

• The Observable completes or errors out naturally
• You call unsubscribe() on the associated Subscription

This cleanup function is where you put logic to stop the underlying operation or prevent further notifications to subscribers.

Example: Wrapping a Promise with an Observable #

Let’s see this in action with a wrapped Promise. Even though the Promise itself can’t be canceled, the Observable can stop delivering its result to subscribers:

import { Observable } from 'rxjs';

// A Promise that resolves after 2 seconds
const delayedPromise = new Promise(resolve => {
  setTimeout(() => {
    console.log('Promise finished running');
    resolve('Promise value');
  }, 2000);
});

// Wrap it in an Observable
const cancellableObservable = new Observable(subscriber => {
  // Start the Promise when subscribed
  const promiseHandler = delayedPromise
    .then(value => {
      subscriber.next(value); // Send value to subscriber
      subscriber.complete(); // Mark Observable as done
    })
    .catch(error => subscriber.error(error));

  // Return the cleanup function
  return () => {
    console.log('Unsubscription triggered!');
    // Note: We can't cancel the Promise itself, but we can ignore its result
    // For cancelable operations (like HTTP requests), we'd abort here (e.g., xhr.abort())
  };
});

// Subscribe to the Observable
const subscription = cancellableObservable.subscribe({
  next: val => console.log('Received value:', val),
  complete: () => console.log('Observable completed')
});

// Unsubscribe after 1 second (before the Promise resolves)
setTimeout(() => {
  subscription.unsubscribe();
}, 1000);

When you run this code:

• After 1 second, unsubscribe() is called, triggering the cleanup function
• The Promise still finishes running (you’ll see "Promise finished running" after 2 seconds)
• But the subscriber never receives the value or the complete notification—because the Observable stops sending them after unsubscription

For Truly Cancelable Operations #

If the underlying operation supports cancellation (like XMLHttpRequest, Fetch with AbortController, or setInterval), the cleanup function can terminate it directly. For example, here’s an Observable wrapping a cancelable HTTP request:

import { Observable } from 'rxjs';

const httpObservable = new Observable(subscriber => {
  const controller = new AbortController();
  const signal = controller.signal;

  fetch('https://api.example.com/data', { signal })
    .then(response => response.json())
    .then(data => {
      subscriber.next(data);
      subscriber.complete();
    })
    .catch(error => {
      if (error.name === 'AbortError') {
        console.log('Request was canceled');
      } else {
        subscriber.error(error);
      }
    });

  // Cleanup function: abort the request when unsubscribed
  return () => controller.abort();
});

const subscription = httpObservable.subscribe(data => console.log(data));

// Cancel the request after 500ms
setTimeout(() => subscription.unsubscribe(), 500);

Here, calling unsubscribe() triggers controller.abort(), which actually stops the HTTP request mid-flight—something a Promise can’t do natively.

Key Takeaways #

• Promises: Eager, one-time, no built-in cancellation. Once started, they run to completion.
• Observables: Lazy, can emit multiple values, and use cleanup functions tied to Subscription objects to enable cancellation.
• Unsubscription can either stop delivering results to subscribers (for non-cancelable operations like Promises) or terminate the underlying operation entirely (for cancelable tasks like HTTP requests).

内容的提问来源于stack exchange，提问作者Sridhar Sg