异步编程的“三角恋”：如何在 Promise、async/await 到 RxJS 中优雅地处理多个请求的依赖？

引言

在前端开发的日常工作中，处理多个异步请求是再常见不过的需求了。无论是从服务器获取数据，还是等待用户输入、接收推送，异步操作都成为了每个前端工程师必须掌握的技能。然而，面对复杂的依赖关系时，如何优雅、高效地处理多个异步请求，成为了每个开发者的挑战。

本篇文章将以「三角恋」为比喻，探讨如何从基础的 Promise 到高级的 RxJS，一步步应对复杂的异步任务。我们的目标是帮助你在不同的开发场景中，优雅地处理 A、B、C 请求之间的依赖关系，并且提升代码的可维护性与可扩展性。

1. 基础版：`Promise.all` + `async/await` —— 简单与高效

对于大多数初学者而言，Promise.all 和 async/await 是解决异步依赖问题的基础武器。它们能够让我们在处理多个请求时保持代码简洁，同时支持并行执行。

async function fetchData() {
  try {
    const [responseA, responseB] = await Promise.all([
      fetch('https://api.example.com/a'),
      fetch('https://api.example.com/b')
    ]);
    
    if (responseA.ok && responseB.ok) {
      const responseC = await fetch('https://api.example.com/c');
      console.log('C登场了！', responseC);
    } else {
      console.log('A或B请求失败，C暂时无法登场');
    }
  } catch (error) {
    console.error('请求失败:', error);
  }
}

fetchData();

优点：

简洁明了：代码结构直观，易于理解。
并行请求：Promise.all 使得多个请求可以并行发起，提高性能。

缺点：

难以扩展：对于更复杂的场景，Promise.all 的错误处理和依赖管理能力有限。
缺乏灵活性：如果想要处理超时、重试等高级场景时，代码将变得复杂。

2. 进阶版：自定义封装与中间件模式 —— 让代码更具复用性

在实际的开发过程中，许多请求会有重试、超时、取消等需求。通过自定义封装和中间件模式，我们可以让异步请求更加灵活、可复用。

const fetchWithRetry = async (url, retries = 3) => {
  for (let i = 0; i < retries; i++) {
    try {
      const response = await fetch(url);
      if (response.ok) return response;
    } catch (error) {
      if (i === retries - 1) throw error;
    }
  }
};

async function fetchData() {
  try {
    const [responseA, responseB] = await Promise.all([fetchWithRetry('https://api.example.com/a'), fetchWithRetry('https://api.example.com/b')]);
    if (responseA.ok && responseB.ok) {
      const responseC = await fetchWithRetry('https://api.example.com/c');
      console.log('C登场了！', responseC);
    }
  } catch (error) {
    console.error('请求失败:', error);
  }
}

fetchData();

优点：

灵活性高：通过封装重试机制、超时机制等，可以处理复杂的异步逻辑。
可复用：将请求逻辑封装成函数，便于多次使用。

缺点：

复杂度增加：需要更多的代码来处理各种边缘情况（如取消请求）。
并行与依赖管理困难：复杂依赖关系难以通过封装和中间件模式解决。

3. 高级版：RxJS —— 让异步流成为一种艺术

当异步逻辑变得更加复杂，使用传统的 Promise 和 async/await 已经难以应对。此时，响应式编程库 RxJS 提供了强大的工具，让我们能够优雅地处理异步流、事件流和依赖关系。RxJS 使用 Observables（可观察对象）来表示异步数据流，通过丰富的操作符让我们可以轻松地进行流的转换、合并、错误处理等操作。

import { from, forkJoin } from 'rxjs';
import { catchError, switchMap } from 'rxjs/operators';

const fetchA = () => from(fetch('https://api.example.com/a'));
const fetchB = () => from(fetch('https://api.example.com/b'));
const fetchC = () => from(fetch('https://api.example.com/c'));

forkJoin([fetchA(), fetchB()]).pipe(
  switchMap(([responseA, responseB]) => {
    if (responseA.ok && responseB.ok) {
      return fetchC();
    } else {
      throw new Error('A或B请求失败');
    }
  }),
  catchError(error => {
    console.error('请求失败:', error);
    return [];
  })
).subscribe(responseC => {
  if (responseC) {
    console.log('C登场了！', responseC);
  }
});

优点：

流式处理：RxJS 将异步操作转换为流，能够清晰地组合多个请求。
强大的错误处理：通过 RxJS 的 catchError 等操作符，我们可以精细地控制错误。
灵活的依赖管理：forkJoin、switchMap、mergeMap 等操作符使得多个异步请求的管理更加灵活高效。

缺点：

学习曲线：RxJS 的概念和操作符比较多，需要一定的时间来掌握。
引入依赖：引入 RxJS 后会增加一定的包体积。

4. 工程化实践：结合状态管理（Vuex/Redux）

在大型项目中，异步请求通常需要与全局状态管理结合。使用 Vuex 或 Redux，可以将请求结果存储在全局状态中，避免在每个组件中重复处理相同的数据。

// actions.js
const fetchA = () => async dispatch => {
  const response = await fetch('https://api.example.com/a');
  dispatch({ type: 'SET_A', payload: response });
};

const fetchB = () => async dispatch => {
  const response = await fetch('https://api.example.com/b');
  dispatch({ type: 'SET_B', payload: response });
};

const fetchC = () => async (dispatch, getState) => {
  const { a, b } = getState();
  if (a && b) {
    const response = await fetch('https://api.example.com/c');
    dispatch({ type: 'SET_C', payload: response });
  }
};

// 组件中触发
dispatch(fetchA());
dispatch(fetchB());
dispatch(fetchC());

优点：

状态管理集中：将数据存储在 Vuex 或 Redux 中，减少了组件之间的复杂性。
异步解耦：将异步请求与组件解耦，易于测试和维护。

缺点：

复杂性增加：需要引入状态管理工具，增加了项目的复杂度。

5. 性能优化：并行化请求与懒加载

在工程化项目中，性能优化同样不可忽视。通过并行化请求和懒加载策略，我们可以减少不必要的网络请求和提高加载速度。

// 并行化请求
const fetchCIfNeeded = async () => {
  const [responseA, responseB] = await Promise.all([fetchA(), fetchB()]);
  if (responseA.ok && responseB.ok) {
    const responseC = await fetchC();
    console.log('C登场了！', responseC);
  }
};

// 懒加载C的请求
button.addEventListener('click', fetchCIfNeeded);

6. 总结

从简单的 Promise 和 async/await 到强大的 RxJS，前端异步编程有着多种解决方案。每种方案都有其优缺点，开发者需要根据项目的复杂性、可维护性要求以及性能需求，选择合适的技术栈。

在面对多请求的依赖关系时，不妨用 RxJS 来优雅地管理异步流，利用流式编程思想提升代码的简洁性与可扩展性。下次当你遇到异步编程的难题时，不妨试试这些方法，让你的代码更加高效、优雅

。

异步编程的“三角恋”：如何在 Promise、async/await 到 RxJS 中优雅地处理多个请求的依赖？