React 中的 GET HTTP 请求

由柏拉图重新发布

关注： 0

介绍

在开发 Web 应用程序时，我们通常会访问托管在服务器上的资源。通过 HTTP 请求完成对资源的请求、发送或执行其他操作。这些请求从客户端发送到服务器上的主机。在发出 HTTP 请求时，客户端使用 URL（统一资源定位符） 以及包含访问服务器资源所需信息的有效负载。

五种常见的 HTTP 请求方法是 GET, PUT, POST, PATCH及 DELETE. 这些方法允许我们执行标准的 CRUD 操作。

在本文中，我们将学习如何使用 Axios 或 Fetch API 在 React 中发出 GET HTTP 请求，以及如何在类和函数式组件中这样做。

什么是 GET 请求？

GET 是一种 HTTP 请求方法，用于从服务器获取资源。

爱可信 和 获取API 是发出 HTTP 请求的两种主要方法。

Fetch API 是一个基于 Promise 的内置 JavaScript 模块，用于从服务器或 API 端点检索资源。
Axios 是一个基于 Promise 的 HTTP 客户端库，它使向 REST 端点发送异步 HTTP 请求变得简单。这是必须安装的外部库。

在本文中，我们将了解如何使用 Fetch API 和 Axios 方法在 React 功能组件中执行 GET 请求，然后在基于类的组件中执行相同的操作。

如何在 React 的功能组件中执行 GET HTTP 请求

当 JavaScript 函数（普通或 ES6）返回一个 React 元素 (JSX) 时，就会创建一个函数式组件。我们在处理功能组件时使用 React 钩子，这在执行 GET 请求时非常重要。

我们将使用 useState() 和 useEffect() 钩子。因为 useEffect() 当应用程序挂载时，钩子会立即呈现，我们总是在其中执行 GET 请求，我们使用 useState() 挂钩来存储我们的数据/响应。

如何使用 Fetch API 在 React 的功能组件中执行 GET HTTP 请求

fetch() 方法接受一个强制参数——我们要获取的资源的 URL，以及一个指示请求方法的可选参数。该可选参数的默认值为 GET, 所以在发出 GET 请求时不需要设置它。

然后 Fetch API 返回一个 Promise，所以我们可以使用 then() 和 catch() 处理成功或失败的方法：

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts')
         .then((res) => res.json())
         .then((data) => {
            console.log(data);
            setPosts(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, []);

   return (
      
   );
};

这就是标准 GET 请求的样子。现在，让我们分解到目前为止所做的工作，以便您更好地理解上面的代码。首先，我们创建了一个状态来保存我们将从 posts API：

const [posts, setPosts] = useState([]);

然后我们利用 useEffect() hook 并在其中写入我们的 GET 请求，以便在应用安装后立即触发请求：

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      })
      .catch((err) => {
         console.log(err.message);
      });
}, []);

之后，我们在 useEffect() 钩子并传递我们可以用来访问服务器的 URL。由于这返回了一个承诺，我们使用 then() 方法。因为该方法返回的是响应对象而不是 JSON，所以我们首先将数据转换为 JSON 格式：

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
}, []);

然后我们继续获取帖子/数据并将它们存储在我们之前创建的状态中：

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      }
}, []);

最后我们使用 catch() 错误处理方法：

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      })
      .catch((err) => {
         console.log(err.message);
      });
}, []);

我们已经执行了一个 GET 请求并将我们的数据保存到我们创建的状态。现在我们可以在 React 应用程序中使用数据了。

如何使用 Axios 在 React 的功能组件中执行 GET HTTP 请求

除了 Fetch API，我们还可以使用 Axios 发送 GET 请求。爱可信是一个基于 Promise 的 HTTP 客户端库，可以轻松地将异步 HTTP 请求发送到 REST 端点。

如果我们想使用 Axios，这是一个外部库，我们必须首先在我们的项目中安装它，方法是在我们的项目目录中运行以下命令：

$ npm install axios

一旦我们成功安装了 Axios，我们就可以继续执行我们的 GET 请求：

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

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      axios
         .get('https://jsonplaceholder.typicode.com/posts?_limit=10')
         .then((response) => {
            setPosts(response.data);
         })
         .catch((err) => {
            console.log(err);
         });
   }, []);

   return (
      
   );
};

查看我们的 Git 学习实践指南，其中包含最佳实践、行业认可的标准以及随附的备忘单。停止谷歌搜索 Git 命令，实际上学习它！

这看起来比 Fetch API 干净多了！看一下上面的代码，我们首先导入 Axios，因为它是我们安装的外部库：

import axios from 'axios';

然后我们在 useEffect() 就像我们为 Fetch API 做的那样，但是这次的语法有点不同：

useEffect(() => {
   axios
      .get('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then((response) => {
         setPosts(response.data);
      })
      .catch((err) => {
         console.log(err);
      });
}, []);

与 Fetch API 方法相比，声明该方法不需要任何选项。我们只需将方法附加到实例并查询它，也不需要转换数据，因为它以 JSON 形式返回。

如何在 React 的类组件中执行 GET HTTP 请求

类组件是返回 JSX 并需要使用 React 扩展的 ES6 类。在引入钩子之前，这是最常用的方法（即早期版本 16.8），因为状态不能在功能组件中使用。

尽管有可用的钩子，但许多人继续使用类组件。让我们看看我们如何使用 constructor() 方法的状态属性，以及 ComponentDidMount() 使用类组件在 React 中执行 GET HTTP 请求的生命周期方法。

如何使用 Fetch API 在 React 的类组件中执行 GET HTTP 请求

这与我们执行的方式非常相似 GET 功能组件中的请求。唯一的区别是我们现在将在 constructor() 方法而不是 useState() 钩。此外，我们将处理我们的 GET 请求在 ComponentDidMount() 生命周期而不是 useEffect() 钩子，以便在我们的应用挂载后触发此请求：

import React, { Component } from 'react';

class App extends Component {
   constructor(props) {
      super(props);
      this.state = {
         posts: [],
      };
   }

   componentDidMount() {
      fetch('https://jsonplaceholder.typicode.com/posts')
         .then((response) => response.json())
         .then((data) => this.setState({ posts: data }))
         .catch((error) => console.log(error));
   }

   render() {
      const { posts } = this.state;

      return (
         
      );
   }
}

在上面的代码中，我们使用构造函数方法来初始化对象的状态，以存储我们将从服务器/API 获得的资源/数据：

constructor(props) {
   super(props);
   this.state = {
      posts: [],
   };
}

然后我们在 componentDidMount() 生命周期方法，以便在应用安装后触发它：

componentDidMount() {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => this.setState({ posts: data }))
      .catch((error) => console.log(error));
}

state 是一个包含许多状态的对象，我们首先对其进行解构得到 posts 状态，以后可以使用：

render() {
   const { posts } = this.state;

   return (
      
   );
}

如何在 React 的类组件中使用 Axios 执行 GET HTTP 请求

正如我们在功能组件中看到的那样，我们可以发送 GET 与 Axios 的请求。剩下的就是执行 GET 请求内 ComponentDidMount() 生命周期和导入 Axios：

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
   constructor(props) {
      super(props);
      this.state = {
         posts: [],
      };
   }

   componentDidMount() {
      axios
         .get('https://jsonplaceholder.typicode.com/posts')
         .then((response) => {
            this.setState({ posts: response.data });
         })
         .catch((error) => {
            console.log(error);
         });
   }

   render() {
      const { posts } = this.state;
      return (
         
      );
   }
}