API 查询提取有效，但 return 没有结果

Question

我正在尝试从 API useEffect:

中获取一个值

useEffect(async() => {
    try {
      const result  = await getToken(urlSuffix);
      logger.log('returned')
      setToken(result);
    } catch (error) {
      logger.debug('ERROR: ', error);
      throw error;
    }
  }, [urlSuffix]);

事实是，函数永远不会返回令牌，但获取部分工作正常（我正在记录令牌）。这是 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');
  }
};

logger.debug 在提取时记录正确的标记，但 logger.log 在 useEffect 中从不记录结果已返回。是什么阻止 getToken 返回 token？

Answer 1

请注意，在 useEffect 中使用 try...catch 是一种不好的做法 ()。

但在我看来，您的 async/await 设置正确，因此它确实应该有效。

尝试将 getToken 函数添加到 useEffect 挂钩的依赖项中。

useEffect(async() => {
    try {
      const result  = await getToken(urlSuffix);
      logger.log('returned')
      setToken(result);
    } catch (error) {
      logger.debug('ERROR: ', error);
      throw error;
    }
  }, [urlSuffix, getToken]);

Answer 2

您似乎在使用 fetch() as if it were Axios，但事实并非如此。

fetch() returns 使用 Response 对象解析的承诺，该对象没有 data 属性。我想你在 getToken() 函数中想要的是这个...

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;
}

您也不应该将异步函数传递给 useEffect，因为它会破坏 cleanup process

useEffect(() => {
  getToken(urlSuffix).then(setToken)
}, [ urlSuffix ]);

API 查询提取有效，但 return 没有结果

API Query fetch works, doesn't return result though

javascript

fetch-api

use-effect