反应使用异步等待和钩子从多个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)