React-调用连续的获取操作(主要依赖于内存)

Question

如何调用第二次提取需要从第一次调用返回id的2次提取操作？

我的代码：

useEffect(() => {
const fetchData = async () => {
const aaa=
await service.getDefaultTemplate();
const bbb=
await service.getAnnouncementTemplate({
templateId: aaa.id,
});
setAaa(aaa); //useState
setBbb(bbb); //useState
};
fetchData().catch(noop)
}, []);

只返回第一个结果aaa，bbb为空

更新

在第一个答案之后：

useEffect(() => {
service
.getDefaultAnnouncementTemplate()
.then((aaa) => {
setAAA(aaa);
service
.getAnnouncementTemplate({
templateId: aaa.id,
})
.then((bbb) => {
setBbb(bbb);
})
.catch(noop);
})
.catch(noop);
}, []);

BUt我收到警告：Eslint:避免嵌套承诺

Answer 1

避免嵌套承诺警告：

useEffect(() => {
service.getDefaultAnnouncementTemplate()
.then((aaa) => {
setAAA(aaa);
return service.getAnnouncementTemplate({templateId: aaa.id})
})
.then((bbb) => setBbb(bbb))
.catch(noop);
}, []);

但是您的async/await代码片段看起来不错。检查服务的输入和输出。getAnnouncementTemplate方法

Answer 2

您可以通过返回使它们相互依赖，在第一个调用中，您可以返回任何状态，可能是对象或其他东西，因此代码将如下所示：

useEffect(() => {
const fetchData = async () => {
const aaa=
await service.getDefaultTemplate();
if(aaa.status !== "success") return;
const bbb=
await service.getAnnouncementTemplate({
templateId: aaa.id,
});
setAaa(aaa); //useState
setBbb(bbb); //useState
};
fetchData().catch(noop)
}, []);

这样，如果第一个调用没有成功，你就终止了执行，你需要做的是从提取中返回任何值，告诉你它是成功的还是错误的