APIQueryfetch有效，但不回傳結果-有解無憂

我正在嘗試從 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？

uj5u.com熱心網友回復：

您似乎在使用fetch()就好像它是Axios而不是。

fetch()回傳一個使用沒有屬性的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它，因為它會破壞清理程序

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

uj5u.com熱心網友回復：

請注意，使用try...catchinsideuseEffect是一種不好的做法（請參閱此處）。

但在我看來，您正確設定了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]);

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/352340.html

標籤：javascript 获取 API 使用效果

上一篇：math.trunc()回傳帶小數的值

下一篇：單擊按鈕時觸發回車鍵