Question

我有一个react-native应用程序，在其中我调用了一个api，该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
});

希望这会有所帮助！

Answer 2

首先，您需要返回由getItem创建的Promise：

export function fetchFromAPI() {
  return 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 Promise.resolve(responseJSON); // <-- this wraps the JSON into a Promise
    }).catch((error) => {
      // console.error(error);
    });
  });
}

然后您需要这样调用函数：

fetchFromAPI().then(apiData => {...

在AsyncStorage内部返回未定义的提取

2 个答案: