javascript - 在 AsyncStorage 中返回未定义的获取

Question

我有一个react-native应用程序，我在其中调用一个api，它应该返回JSON，但我只是未定义。

export function fetchFromAPI() {
  AsyncStorage.getItem('@token', (errToken, token) => {
    let token = null;

    const requestBody = { token: token };

    return fetch(url, {
      method: 'POST',
      body: JSON.stringify(requestBody)
    })
    .then((response) => response.json())
    .then((responseJSON) => {
      console.log(responseJSON); // <-- this shows the correct JSON data
      return responseJSON;
    }).catch((error) => {
      // console.error(error);
    });
  });
}

我也这样调用该函数:

const apiData = fetchFromAPI();

如果我在 fetch 函数中执行 console.log() ，它会返回 JSON 数据，但如果我对 apiData 执行，它就会变得未定义。

有谁知道为什么会这样，我做错了什么吗？

Answer 1

您可以使用Promise从fetchFromAPI函数获取响应，例如

export function fetchFromAPI() {
  return new Promise((resolve, reject) => {
    AsyncStorage.getItem('@token', (errToken, token) => {
      let token = null;

      const requestBody = {
        token: token
      };

      return fetch(url, {
          method: 'POST',
          body: JSON.stringify(requestBody)
        })
        .then((response) => response.json())
        .then((responseJSON) => {
          console.log(responseJSON); // <-- this shows the correct JSON data
          resolve(responseJSON);
        }).catch((error) => {
          reject(error);
        });
    });
  });
}

调用fetchFromAPI时，使用await，例如

const apiData = await fetchFromAPI();

您还可以使用 .then 捕获响应并将其存储在 state 中，例如

fetchFromAPI.then((data) => {
   // use data here
});

希望这会有所帮助!