在 react 中访问 RESTful API

Posted 2023-02-22

【中文标题】在 react 中访问 RESTful API

【英文标题】：access to RESTful API in react

【发布时间】：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。谢谢

【问题讨论】：

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

【参考方案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