等待嵌套子Promise：Web应用API前端多Ajax请求实现问询

需求梳理 #

你需要依次完成三层异步操作来对接Web应用API：

• 第一步：拉取所有群组的列表
• 第二步：针对每个群组，获取对应的成员列表
• 第三步：针对每个群组成员，获取其终端信息并展开对应值

整理后的请求函数 #

我先把你给出的代码补全并整理成更规范的形式，每个函数都返回jQuery Ajax的Promise对象，方便后续链式调用：

// 获取所有群组列表
function getGroups() {
  return jQuery.ajax({
    url: `https://webapp.mydomain.com/group?session=${his.getSessionToken()}&customer=test`,
    method: 'GET' // 显式指定请求方法，代码可读性更强
  });
}

// 根据指定群组获取成员列表
function getMembers(group) {
  // 假设group对象包含唯一标识id，实际开发中替换为接口要求的字段即可
  return jQuery.ajax({
    url: `https://webapp.mydomain.com/group/${group.id}/members?session=${his.getSessionToken()}&customer=test`,
    method: 'GET'
  });
}

// 根据指定成员获取终端信息
function getMemberTerminals(member) {
  // 假设member对象包含唯一标识id，替换为实际接口要求的字段
  return jQuery.ajax({
    url: `https://webapp.mydomain.com/member/${member.id}/terminals?session=${his.getSessionToken()}&customer=test`,
    method: 'GET'
  });
}

完整的调用逻辑 #

为了避免陷入回调地狱，我提供两种组织流程的方式，你可以根据项目环境选择：

方式一：Promise链式调用（兼容旧版浏览器） #

getGroups()
  .then(groups => {
    // 并行处理所有群组的成员请求，提升加载效率
    return Promise.all(groups.map(group => 
      getMembers(group)
        .then(members => {
          // 并行处理当前群组下所有成员的终端请求
          return Promise.all(members.map(member => 
            getMemberTerminals(member).then(terminals => ({
              groupInfo: group,
              memberInfo: member,
              terminalData: terminals
            }))
          ));
        })
    ));
  })
  .then(allNestedData => {
    // 把二维数组展平，方便后续渲染处理
    const flattenedData = allNestedData.flat().flat();
    console.log('最终整合数据:', flattenedData);
    // 这里可以添加页面渲染逻辑，比如把数据渲染到表格或列表中
  })
  .catch(error => {
    // 统一捕获所有请求的错误，避免重复处理
    console.error('请求过程中出现异常:', error);
    // 可以在这里给用户展示友好的错误提示，比如弹窗或页面提示
  });

方式二：async/await（代码更简洁，需环境支持ES2017+） #

async function fetchFullData() {
  try {
    const groups = await getGroups();
    const allData = await Promise.all(groups.map(async group => {
      const members = await getMembers(group);
      return Promise.all(members.map(async member => {
        const terminals = await getMemberTerminals(member);
        return { group, member, terminals };
      }));
    }));
    // 展平数据结构
    const processedData = allData.flat().flat();
    console.log('处理完成的数据:', processedData);
    // 页面渲染逻辑...
  } catch (error) {
    console.error('数据拉取失败:', error);
    // 错误提示逻辑...
  }
}

// 调用执行
fetchFullData();

小优化建议 #

• 参数复用：可以把session和customer提取成常量，避免每次拼接URL都重复写，比如：

  const commonQueryParams = `session=${his.getSessionToken()}&customer=test`;
  // 后续URL可以写成：`https://webapp.mydomain.com/group?${commonQueryParams}`
  

• 缓存机制：如果数据不会频繁更新，可以给请求结果加缓存，比如用对象存储已请求过的群组/成员数据，避免重复发起相同请求
• 加载状态：在请求开始和结束时添加加载提示，提升用户体验

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