Estoy tratando de obtener un valor de una API useEffect:
useEffect(async() => { try { const result = await getToken(urlSuffix); logger.log('returned') setToken(result); } catch (error) { logger.debug('ERROR: ', error); throw error; } }, [urlSuffix]);La cuestión es que la función nunca devuelve el token, pero la parte de obtención funciona correctamente (estoy registrando el token). Aquí está la búsqueda de API:
export const getToken = async ( urlSuffix ) => { try { const url = `https://api_url/api/v1/asset/${urlSuffix}`; const data = await fetch(url, { headers: { 'Accept': 'application/json', 'X-Api-Key': API_KEY, }, method: 'get', timeout: 5000, // 5 secs }); const token = data?.data?.collection?.token; logger.debug('TOKEN: ', token); return token; } catch (error) { logger.debug('TOKEN FETCH ERROR'); } }; El logger.debug al buscar registra el token correcto, pero el logger.log en useEffect nunca registra que los resultados han regresado. ¿Qué impide que getToken devuelva el token ?
Parece que estás usando fetch() como si fuera Axios , que no lo es.
fetch() devuelve una promesa que se resuelve con un objeto de respuesta que no tiene una propiedad data . Creo que lo que quieres en tu función getToken() es esto...
export const getToken = async (urlSuffix) => { const url = `https://api_url/api/v1/asset/${urlSuffix}`; // FYI - fetch does not support timeouts const res = await fetch(url, { headers: { 'Accept': 'application/json', 'X-Api-Key': API_KEY, }, method: 'GET', }); if (!res.ok) { logger.debug('TOKEN FETCH ERROR'); throw new Error(`${res.status}: ${await res.text()}`) } const data = await res.json() // parse the response stream as JSON const token = data.collection.token; logger.debug('TOKEN: ', token); return token; } Tampoco debe pasar una función asíncrona a useEffect ya que interrumpe elproceso de limpieza
useEffect(() => { getToken(urlSuffix).then(setToken) }, [ urlSuffix ]);Tenga en cuenta que usar un try...catch dentro de useEffect es una mala práctica ( ver aquí ).
Pero me parece que configuró su async / await correctamente, por lo que realmente debería funcionar.
Intente agregar la función getToken a las dependencias de su useEffect .
useEffect(async() => { try { const result = await getToken(urlSuffix); logger.log('returned') setToken(result); } catch (error) { logger.debug('ERROR: ', error); throw error; } }, [urlSuffix, getToken]);