在 react 中访问 RESTful API答案

【问题标题】：access to RESTful API in react在 react 中访问 RESTful API
【发布时间】：2020-11-28 23:41:18
【问题描述】：

我在服务器端有laravel，输入这个url可以显示api：http://localhost:8000/api/cabangs，并显示这个（以数据为例）：

[
 {
  "id":2,
  "nm_cabang":"zxcvb",
  "deskripsi":"poiuyt",
  "created_at":"2020-08-08T05:25:31.000000Z",
  "updated_at":"2020-08-08T05:29:23.000000Z"
 },
 {
  "id":3,
  "nm_cabang":"asdfg",
  "deskripsi":"qwerty",
  "created_at":"2020-08-08T05:28:26.000000Z",
  "updated_at":"2020-08-08T05:28:26.000000Z"
 }
]

我只想显示nm_cabang 和deskripsi。如果可能，请使用react hooks。谢谢

【问题讨论】：

欢迎来到 StackOverflow！请发布一些代码来展示您的目标，以便我们帮助进一步调试任何具体问题。

标签： javascript json reactjs laravel api

【解决方案1】：

你可以从这样的事情开始。我假设这是针对网络的，所以我使用了 span 和 div。

const App: React.FC = () => {
  const [data, setData] = React.useState();
  const [isLoading, setLoading] = React.useState(true);

  React.useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await fetch('http://localhost:8000/api/cabangs');
        if (result.ok)
        {
            let json = await result.json();
            setData(json);
        }
      } catch (e) {
        //error
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  if (isLoading) {
    return <span>Loading...</span>;
  }

  return (
    <div>
      {
      data ? (
        data.map((item) => {
          return <span>{`${item.nm_cabang} ${item.deskripsi}`}</span>;
        })
      ) : (
        <></>
      )
      }
    </div>
  );
};

【讨论】：

如果这是您第一次将前端连接到 api @Febry Aryo，这可能看起来很难理解。但这很简单，当您使用 axios 或 fetch 发出请求时，该方法会返回有关请求的对象信息，例如其状态码、来自 api 的数据和响应的标头，您可以进行任何您想要的操作想要获得这些信息。
这个问题解决了。我使用 axios 作为替代方案。感谢所有答案:)

【解决方案2】：

使用 axios 或 fetch 之类的库，你只需要对 url 进行 http 请求，并使用你需要的数据。

https://github.com/axios/axios https://javascript.info/fetch

我喜欢 axios

【讨论】：