如何不使用setTimeout实现RxJS订阅结果的正确获取？

Hey there! Let's tackle your two questions one by one—they're both about avoiding setTimeout for async logic, which is a great topic since relying on arbitrary delays is almost always a bad practice.

If you need to create a delay without setTimeout, here are a few reliable approaches:

• Promise + requestAnimationFrame
  This method leverages the browser's rendering cycle to handle delays, which can be more consistent than setTimeout in some cases (especially for UI-related timing):

  function delay(ms) {
    return new Promise(resolve => {
      const startTime = Date.now();
      function checkDelay() {
        if (Date.now() - startTime >= ms) {
          resolve();
        } else {
          requestAnimationFrame(checkDelay);
        }
      }
      checkDelay();
    });
  }
  
  // Usage example
  async function runDelayedLogic() {
    console.log("Before delay");
    await delay(1000);
    console.log("After 1 second delay");
  }
  runDelayedLogic();
  

• Web Worker-based delay
  For scenarios where you need precise timing without blocking the main thread (great for heavy computations), use a Web Worker to handle the wait:

  // Create a separate worker file (e.g., delay.worker.js)
  self.onmessage = (e) => {
    const waitTime = e.data;
    const start = Date.now();
    while (Date.now() - start < waitTime) { /* Sync wait, no main thread block */ }
    self.postMessage("delay complete");
  };
  
  // Main thread code
  function delayWithWorker(ms) {
    return new Promise(resolve => {
      const worker = new Worker("delay.worker.js");
      worker.postMessage(ms);
      worker.onmessage = () => {
        worker.terminate();
        resolve();
      };
    });
  }
  
  // Usage example
  delayWithWorker(1000).then(() => console.log("Worker delay done"));
  

• setInterval (alternative timer)
  While it's still a timer API, it's a valid alternative to setTimeout for one-off delays:

  function delayWithInterval(ms) {
    return new Promise(resolve => {
      const intervalId = setInterval(() => {
        clearInterval(intervalId);
        resolve();
      }, ms);
    });
  }
  
  // Usage example
  delayWithInterval(1000).then(() => console.log("Interval-based delay done"));
  

Your original code uses setTimeout to "wait" for the subscribe callback to assign res—this is a fragile hack because you can't guarantee how long the async getUser() call will take. Here's how to fix it properly:

• Handle the value directly in the subscribe callback
  This is the simplest and most idiomatic approach for RxJS:

  this.auth.getUser().subscribe((response) => {
    console.log(response); // Use the value immediately when it's available
    // You can also assign it to a variable or component property here
    this.userData = response;
  });
  

• Use RxJS operators to process the stream
  If you need to transform or add side effects before using the value, use pipe() with operators like tap or map:

  import { tap, map } from 'rxjs/operators';
  
  this.auth.getUser()
    .pipe(
      tap(response => {
        // Side effect: assign to a variable
        this.userData = response;
      }),
      map(response => response.fullName) // Transform the data if needed
    )
    .subscribe(transformedData => {
      console.log(transformedData);
    });
  

• Convert to a Promise with async/await
  If you prefer working with Promises, convert the Observable to a Promise (RxJS 7+ recommends firstValueFrom/lastValueFrom instead of the deprecated toPromise()):

  import { firstValueFrom } from 'rxjs';
  
  async function fetchUser() {
    try {
      const res = await firstValueFrom(this.auth.getUser());
      console.log(res);
    } catch (error) {
      console.error('Failed to fetch user:', error);
    }
  }
  
  fetchUser();
  

The key takeaway here is to work with RxJS's built-in async handling instead of guessing when the value will arrive with setTimeout.

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