React Fetch 不适用于一个链接，但适用于另一个链接

Question

我正在尝试使用 react 来获取 api 信息（见下文），但它没有返回任何值，但当我使用不同的链接时它可以工作。不确定第二个链接的问题是什么。如何使第二个链接工作或有不同的方法？

import React, { useState, useEffect } from "react";
import axios from "axios";
export default function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    getData()
}, []);

async function getData() {
  // await axios("https://randomuser.me/api")             // <----- this works
  await axios("https://api.sampleapis.com/wines/reds")    // <----- this does not work
  .then((response) => {
    setData(response.data);
    console.error("No Error fetching data: fds");
  })
  .catch((error) => {
    console.error("Error fetching data: ", error);
    setError(error);
  })
  .finally(() => {
    setLoading(false);
  });
}
if (loading) return "Loading...";
if (error) return "Error!"; //dfdsaf
return ( <>
    {/* <img src={data.results[0].picture.medium} alt="random user" /> */}
    <pre>{JSON.stringify(data, null, 2)}</pre>
  </>
); }

Answer 1

各个API返回数据的结构各不相同。

https://randomuser.me/api -> returns {"results":[{"gender"...

https://api.sampleapis.com/wines/reds -> returns [{"winery":"Maselva","wine"...

显然，仅仅更改 URL 是行不通的。您必须根据返回数据的结构相应地更改代码才能正确访问它们。

Answer 2

响应结构不同，您可能不需要使用.then 和.catch，因为您已经使用了Async/Await。

这是codesandbox 中的一个工作示例

<script type="text/babel">
// import React, { useState, useEffect } from "react";
// import axios from "axios";
const { useState, useEffect } = React;

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [randomUserData, setRandomUserData] = useState(null);
  const [randomUserLoading, setRandomUserLoading] = useState(true);
  const [randomUserError, setRandomUserError] = useState(null);
  useEffect(() => {
    getRandomUserData();
    getSampleApiData();
  }, []);

  async function getSampleApiData() {
    try {
      const response = await axios("https://api.sampleapis.com/wines/reds");
      setData(response.data);
      console.error("No Error fetching data: fds");
    } catch (error) {
      console.error("Error fetching data: ", error);
      setError(error);
    }
    setLoading(false);
  }

  async function getRandomUserData() {
    try {
      const response = await axios("https://randomuser.me/api");
      setRandomUserData(response.data);
      console.error("No Error fetching data: fds");
    } catch (error) {
      console.error("Error fetching data: ", error);
      setRandomUserError(error);
    }
    setRandomUserLoading(false);
  }

  if (loading || randomUserLoading) return "Loading...";
  if (error || randomUserError) return "Error!";
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(2, 1fr)",
        width: "100%"
      }}
    >
      <div>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
      <div>
        <pre>{JSON.stringify(randomUserData, null, 2)}</pre>
      </div>
    </div>
  );
}

// export default App;
ReactDOM.render(<App />, document.querySelector("#app"));
</script>

<div id="app"></div>

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/axios@0/dist/axios.js"></script>
<script crossorigin src="https://unpkg.com/@babel/standalone@7/babel.js"></script>