React中如何规范实现依赖式连续Fetch请求？

一、原async/await代码问题分析 #

你写的第一段代码里bbb始终为null，大概率是这两个原因：

• 第一个请求返回的aaa对象没有id字段，导致第二个请求参数错误，请求失败，但catch(noop)吞了所有错误，你看不到报错信息
• 第二个请求本身接口报错，同样因为错误被noop忽略，没触发任何提示，导致setBbb根本没执行

修复思路：

1. 先打印aaa确认是否存在id字段
2. 不要用noop吞错误，改成打印错误信息方便排查：

   fetchData().catch(err => console.error('请求出错:', err))
   

如果接口本身正常，原async/await写法逻辑是正确的，只要aaa.id存在且请求不报错，bbb就能正常获取。

二、解决Promise嵌套的ESLint警告 #

你用Promise链式时嵌套了then，触发了avoid nesting promises警告，正确的做法是把第二个请求的Promise返回，在外层链式调用then，避免嵌套：

useEffect(() => {
  service.getDefaultAnnouncementTemplate()
    .then((aaa) => {
      setAAA(aaa);
      // 返回第二个请求的Promise，实现链式调用
      return service.getAnnouncementTemplate({ templateId: aaa.id });
    })
    .then((bbb) => {
      setBbb(bbb);
    })
    .catch(err => console.error('请求出错:', err));
}, []);

这样既保持了链式调用的清晰，又符合ESLint规范。

三、更健壮的写法（推荐） #

不管用async/await还是Promise链式，都要加错误处理，并且校验aaa.id是否存在，避免参数错误：

async/await版本 #

useEffect(() => {
  const fetchData = async () => {
    try {
      const aaa = await service.getDefaultTemplate();
      // 校验id是否存在，提前拦截错误
      if (!aaa?.id) {
        throw new Error('获取的模板缺少id字段');
      }
      const bbb = await service.getAnnouncementTemplate({ templateId: aaa.id });
      setAaa(aaa);
      setBbb(bbb);
    } catch (err) {
      console.error('数据获取失败:', err);
      // 这里可以添加前端错误提示逻辑，比如setError(err.message)
    }
  };
  fetchData();
}, []);

Promise链式版本 #

useEffect(() => {
  service.getDefaultAnnouncementTemplate()
    .then((aaa) => {
      if (!aaa?.id) {
        throw new Error('获取的模板缺少id字段');
      }
      setAAA(aaa);
      return service.getAnnouncementTemplate({ templateId: aaa.id });
    })
    .then((bbb) => {
      setBbb(bbb);
    })
    .catch(err => {
      console.error('数据获取失败:', err);
      // 前端错误提示逻辑
    });
}, []);

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