什么是 REST(具象状态转移)?

当调用 RESTful API 时,服务器将向客户端传输请求资源的状态表示。

状态的表示可以是 JSON 格式,并且可能对于大多数 API 来说确实如此。 (也可以是 XML 或 HTML 格式)

服务器是做什么的?

当您(客户端)调用其 API 时,取决于您需要提供给服务器的两件事:

• 您感兴趣的资源的标识符。这是资源的 URL,也称为端点。实际上,URL 代表统一资源定位器。

• 您希望服务器对该资源执行的操作,采用 HTTP 方法或动词的形式。常见的 HTTP 方法是 GET、POST、PUT 和 DELETE。

它是如何工作的?

REST API 通过 HTTP 请求进行通信,以执行标准数据库功能,例如在资源中创建、读取、更新和删除记录(也称为 CRUD)。例如...

• REST API 将使用 GET 请求来检索记录,

• 创建一个 POST 请求,

• 更新记录的 PUT 请求,

• 和一个删除一个删除请求。

所有 HTTP 方法都可以在 API 调用中使用。设计良好的 REST API 类似于在具有内置 HTTP 功能的 Web 浏览器中运行的网站。

项目设置

1. 在您的命令提示符下运行此代码以创建一个新的 React 应用程序。

npx create-react-app rest-api

进入全屏模式 退出全屏模式

1a。将 CD 放入 app 文件夹

cd rest-api

进入全屏模式 退出全屏模式

1b。运行 npm start

现在您的项目已启动并正在运行。让我们开始编码吧!

[](https://res.cloudinary.com/practicaldev/image/fetch/s--fGPyGguS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/v21uut5j7izzfl79910j.PNG)

文件夹结构

在根级别,我们将保留以下文件。

• 索引.JS

• 应用程序.JS

• 应用程序.CSS

• 索引.CSS

应用程序组件

通过删除 div 中的所有内容来清理您的 App.js 并使其看起来像这样。

import React from 'react';
import './App.css';

function App(){
  return (
    <div className="App">
    Hello World!
    </div>
  )
}

export default App

进入全屏模式 退出全屏模式

获取 API 数据

现在让我们使用 useEffect Hook 记录来自QuotesApi的数据。

import './App.css';
import React,{useEffect} from 'react';

export default function App() {

  useEffect(() => {

  }, []);


  return (
    <div className="App">

    </div>
  );

}

进入全屏模式 退出全屏模式

定义您的网址

  useEffect(() => {
    const url = "https://type.fit/api/quotes";

  }, []);

进入全屏模式 退出全屏模式

创建异步函数

然后创建一个异步函数来获取我们的数据。对于这个用例,函数需要在获取数据(我们的承诺)之后等待,然后才能继续。

  const fetchData = async () => {
      try {
          const res = await fetch(url);
          const json = await res.json();
          console.log(json);
      } catch (err) {
          console.log("error", err);
      }
  };

进入全屏模式 退出全屏模式

将 fetchData 函数放在 useEffect 挂钩中,并记得这样调用它。

  useEffect(() => {
    const url = "https://type.fit/api/quotes";

    const fetchData = async () => {
      try {
          const res = await fetch(url);
          const json = await res.json();
          console.log(json);
      } catch (err) {
          console.log("error", err);
      }
  };

  fetchData();
  }, []);

进入全屏模式 退出全屏模式

刚刚创建的函数包含在 try...catch 语句中以捕获错误并在控制台中打印它们。 我们为什么要这样做? 帮助调试并防止应用程序意外崩溃。

检查您的 console.log 语句,看看您是否像这样从 API 获取正确的数据。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--RenplALD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/ucvndqdtlgfyu6wm9r3q.PNG)

我们如何从 api 中获取数据?

为此,我们必须从 react 中导入 useState 并对其进行定义。

import React,{useEffect, useState} from 'react';

进入全屏模式 退出全屏模式

 setQuotes(json);

进入全屏模式 退出全屏模式

然后你的返回体应该是这样的:

  return (
    <table className="App">
    <tr>
        <th>Text</th>
        <th>Author</th>
    </tr>
    {quotes.map(({ author, text }, index) => (
        <tr key={index}>
            <th>{text}</th>
            <th>{author}</th>
        </tr>
    ))}
    </table>
  );

进入全屏模式 退出全屏模式

现在让我们把所有东西和任何样式放在一起来完成这个项目!

import './App.css';
import React,{useEffect, useState} from 'react';

export default function App() {

  const [quotes, setQuotes] = useState([]);

  useEffect(() => {
    const url = "https://type.fit/api/quotes";

    const fetchData = async () => {
      try {
          const res = await fetch(url);
          const json = await res.json();
          console.log(json);
          setQuotes(json);
      } catch (err) {
          console.log("error", err);
      }
  };

  fetchData();
  }, []);


  return (
    <table className="App">
    <tr>
        <th>Text</th>
        <th>Author</th>
    </tr>
    {quotes.map(({ author, text }, index) => (
        <tr key={index}>
            <th>{text}</th>
            <th>{author}</th>
        </tr>
    ))}
    </table>
  );
}

进入全屏模式 退出全屏模式

再次检查控制台并查看您从 API 获取的数据。

这将是输出。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--F-u_KLHj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/ik9kecc3g5svlm9n94nr.png)

看起来好赞!

非常感谢你坚持到最后,祝你有美好的一天!