时间戳

首页 > 解决方案 > API Query fetch 有效，但不返回结果

javascript - API Query fetch 有效，但不返回结果

问题描述

我正在尝试从 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？

标签： javascriptfetch-apiuse-effect

解决方案

您似乎正在使用fetch()，就好像它不是Axios一样。

fetch()返回一个用没有属性的Response对象解析的Promise 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因为它会破坏清理过程

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

推荐阅读