面试题：JavaScript中RxJS的操作符在异步编程中的应用

Question

假设你有一个包含多个异步任务的场景，任务之间存在依赖关系，如任务B需要在任务A完成后执行，任务C需要在任务B完成后执行。请使用RxJS的操作符（如map、switchMap等）来实现这种异步任务流，并解释为什么选择这些操作符以及它们在这种场景下的优势。

Answer 1

实现代码

import { from } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';

// 模拟异步任务
const taskA = () => new Promise((resolve) => {
    setTimeout(() => {
        console.log('Task A completed');
        resolve('Result of A');
    }, 1000);
});

const taskB = (resultOfA) => new Promise((resolve) => {
    setTimeout(() => {
        console.log('Task B completed with result from A:', resultOfA);
        resolve('Result of B');
    }, 1000);
});

const taskC = (resultOfB) => new Promise((resolve) => {
    setTimeout(() => {
        console.log('Task C completed with result from B:', resultOfB);
        resolve('Result of C');
    }, 1000);
});

from(taskA())
   .pipe(
        switchMap(resultA => from(taskB(resultA))),
        switchMap(resultB => from(taskC(resultB)))
    )
   .subscribe(finalResult => {
        console.log('Final result:', finalResult);
    });

操作符选择及优势

1. from：用于将Promise转换为Observable，这样就可以使用RxJS的各种操作符来处理异步操作。
2. switchMap：
   • 选择原因：在处理有依赖关系的异步任务时，switchMap非常合适。它会等待前一个Observable（即前一个异步任务）完成，并将其结果作为参数传递给下一个Observable（下一个异步任务）。
   • 优势：能够确保任务按照顺序执行，并且如果在前一个任务完成之前，有新的任务触发（在更复杂场景下可能出现），switchMap会取消之前未完成的任务，只处理最新的任务链，避免不必要的计算和资源浪费，保证了异步任务流的正确性和高效性。而map操作符只是对Observable发射的值进行转换，不会处理异步操作，所以不适合这种存在异步依赖的场景。