React中基于AWS Amplify如何高效管理多个异步API调用

AWS Amplify的API调用默认返回标准Promise对象，直接用JavaScript内置的Promise.all并行发起所有5个请求是效率最高的实现方式：所有请求同时发起不需要排队，总耗时等于最慢的单个请求的耗时，比串行逐个调用效率提升4~5倍。

基础实现示例 #

首先导入Amplify API依赖，定义你的5个请求方法：

import { API } from 'aws-amplify';

// 按你的业务需求定义5个API请求，每个方法直接返回Amplify API调用的Promise
const req1 = () => API.get('你的API名称', '/接口路径1', { /* 自定义请求参数 */ });
const req2 = () => API.get('你的API名称', '/接口路径2', { /* 自定义请求参数 */ });
const req3 = () => API.post('你的API名称', '/接口路径3', { body: {/* 提交数据 */} });
const req4 = () => API.get('你的API名称', '/接口路径4', { /* 自定义请求参数 */ });
const req5 = () => API.del('你的API名称', '/接口路径5', { /* 自定义请求参数 */ });

调用Promise.all批量执行所有请求，等待全部完成后处理结果：

async function handleBatchRequest() {
  try {
    // 结果顺序和传入的请求数组顺序完全一致，和单个请求返回先后无关
    const [res1, res2, res3, res4, res5] = await Promise.all([
      req1(),
      req2(),
      req3(),
      req4(),
      req5()
    ]);

    // 所有请求成功后，这里执行你的后续数据处理逻辑
    console.log('所有请求返回结果：', res1, res2, res3, res4, res5);
  } catch (err) {
    // 只要有一个请求报错就会进入catch，可在这里统一处理异常
    console.error('请求执行出错：', err);
  }
}

// 执行批量请求
handleBatchRequest();

可选：容忍部分请求失败的实现 #

如果你不需要所有请求都成功才能执行后续逻辑，允许部分请求失败时依然拿到成功请求的返回结果，可以替换为Promise.allSettled：

async function handleBatchRequest() {
  const results = await Promise.allSettled([
    req1(),
    req2(),
    req3(),
    req4(),
    req5()
  ]);

  // 遍历处理每个请求的执行结果
  results.forEach((item, index) => {
    if (item.status === 'fulfilled') {
      console.log(`请求${index+1}成功，返回结果：`, item.value);
    } else {
      console.log(`请求${index+1}失败，错误信息：`, item.reason);
    }
  })

  // 在这里执行你的后续处理逻辑
}

注意事项 #

• 两种实现方式都是并行发起所有请求，耗时没有区别，仅异常处理逻辑不同
• Promise.all的返回结果顺序和传入的请求数组顺序完全对应，不需要担心请求返回先后导致结果错位
• Amplify内置的IAM/Cognito鉴权逻辑会自动在每个API请求中生效，不需要额外做鉴权处理

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