如何解决反应使用异步等待和钩子从多个API获取数据
我目前正在从一个端点获取数据。我想在onload函数的状态变量中存储另一个api端点数据。但是我不确定如何获取多个端点。
我需要打电话给的第二个终点
'/api/get_all_test_types'
这显示了用于获取一个端点的代码
useEffect(() => {
async function onLoadCreateUnitTests() {
const results = await get('get_tables_autocomplete/b',user.user)
autoComplete.setTablesAutoComplete(results)
}
onLoadCreateUnitTests()
},[])
MarkCBall代码:
useEffect(() => {
async function onLoadCreateUnitTests() {
const results = await get('get_tables_autocomplete/b',user.user)
const resultsAllTestTypes = await get('/api/get_all_test_types')
autoComplete.setTablesAutoComplete(results)
setAllTestTypes(resultsAllTestTypes)
}
onLoadCreateUnitTests()
},[])
解决方法
您只需在一个await
函数中执行多个async
async function onLoadCreateUnitTests() {
const results = await get('get_tables_autocomplete/b',user.user);
const allTestTypes = await get('/api/get_all_test_types',user.user);
autoComplete.setTablesAutoComplete(results);
setAllTestType(allTestTypes); // recommend you to have some state so you can set it here
}
,
const results = await get('get_tables_autocomplete/b',user.user)
const resultsAllTestTypes = await get('/api/get_all_test_types')
autoComplete.setTablesAutoComplete(results)
setAllTestTypes(resultsAllTestTypes)
或者,您可以像这样同时运行这两个查询。两个查询中较慢的查询完成后,该操作将立即完成。
const getPromises = [
await get('get_tables_autocomplete/b',user.user),await get('/api/get_all_test_types')
]
const getResponses = Promise.all(getPromises)
autoComplete.setTablesAutoComplete(getResponses[0])
setAllTestTypes(getResponses[1])
通过回调,您可能会变得更加复杂,以至于您在第一个获取到代码后立即开始填充,就像这样:
get('get_tables_autocomplete/b',user.user).then(autoComplete.setTablesAutoComplete)
get('/api/get_all_test_types').then(setAllTestTypes)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。