React Native 获取异步 function 的返回值

Question

我正在尝试从 MYSQL 服务器获取酒吧位置数据，而我的获取 function 运行良好。 但在那之后，这个 try-catch 块不会返回任何东西。 我也试过没有 try-catch 块，但它没有改变任何东西

  getPubsFromDatabase = async () => {
    let response = await fetch(fetchDataUrl, {
      method: 'POST',
      headers: 
      {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
      },
    });
    try{
      let json = await response.json();
      console.log(json)
      return json;
    }
    catch (error) {
      console.log(error);
    }
  }

在这里，我试图获取 function 的返回值。 但是在这个版本中，我什至看不到任何console.log output。 我的意思是，如果我将第二行放在没有“await”关键字的异步块中，我可以看到 console.log 但它给出了“未定义”。

  (async () => {
    const locationsData = await getPubsFromDatabase();
    console.log(locationsData)
  })()

Answer 1

您可以在 function fetch中使用then和catch 。

  const getPubsFromDatabase = () => {
    return fetch(fetchDataUrl, {
      method: 'POST',
      headers: 
      {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
      },
    }).then(async (response) => {
      const json = await response.json().then((data)=>{
        return data;
      }).catch((err)=>{
        console.log('error from json method: ',err);
        return  { error: {
         message: 'error from json method',
         object: err
        }};
      });
      console.log(json);
      return json;
    }).catch((error) => {
      console.log('error from request: ', error);
      return  {
        error: {
          message: 'error from request', object: error
        }
      };
    });
  }

当您使用getPubsFromDatabase方法时，将采用以下方式：

  (async () => {
    const locationsData = await getPubsFromDatabase();
    console.log(locationsData);
  })()

Answer 2

您可以使用 Promise 返回结果或错误，在下面给出的示例中，我使用了 axios 库，但您也可以尝试使用相同的 fetch api 示例

export const getData = () => {

  return new Promise((resolve, reject) => {
    const url = ApiConstant.BASE_URL + ApiConstant.ENDPOINT;
    const API_HEADER = {
      "Authorization": token,
    };

    axios
      .get(url, {
        headers: API_HEADER,
      })
      .then((res) => {
        resolve(res.data);
      })
      .catch((error) => {
        // handle error
        reject(error);
        console.log(error);
      });
  })
}

您可以像这样在组件或屏幕中调用上述 function：

getData().then(
            (data: any) => {

            }
        ).catch(
            error => {
                console.log(error)
            }
        )

Answer 3

我解决了这个问题，而不是从 function 返回值，而是在 function 中设置值。 这似乎现在有效。

  const [locationsData, setLocationsData] = useState();
  getPubsFromDatabase = async () => {
    let response = await fetch(fetchDataUrl, {
      method: 'POST',
      headers: 
      {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
      },
    });
    try{
      let json = await response.json();
      setLocationsData(json); // Here, I changed the value of the locationsData instead of returning
    }
    catch (error) {
      console.log(error);
    }
  }

并调用 function：

  useEffect(()=> {
    getPubsFromDatabase();
  },[])