在 React 中发布 HTTP 请求

时间戳：11年2022月6日上午30:XNUMX

介绍

在使用 API 时，我们经常希望将数据发送到服务器进行处理。 例如，如果我们有一个待办事项列表并且想要添加到它，可能通过表单提交，我们使用 POST HTTP 请求来发送带有有效负载的请求以进行处理和潜在的持久性。

在本文中，我们将学习如何使用两种常见的方法在 React 中执行 POST HTTP 请求：Fetch API 和 Axios。 我们还将了解如何在函数式和基于类的组件中做到这一点。

使用 Fetch API，使用 React 发送 POST HTTP 请求非常简单：


fetch('/myserver.endpoint', {
  method: 'POST',
  body: JSON.stringify({
    
  })
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
   .then((response) => response.json())
   .then((data) => {
      console.log(data);
      
   })
   .catch((err) => {
      console.log(err.message);
   });

Axios 为我们提供了发送 HTTP POST 请求的优雅替代方案：


axios.post('/myserver.endpoint', {
    
  })
  .then((response) => {
    console.log(response.data);
      
  })
  .catch((error) => {
    console.log(error);
  })

如果您想了解有关这些方法及其工作原理的更多信息 - 请阅读本指南的其余部分！

什么是 POST HTTP 请求？

顾名思义，POST 请求用于将数据发布到端点——然后通常会对其进行处理并将其保存在数据库中。 这些数据可能来自表单、保存在对象中或以其他方式获取——但通常会转换为 JSON 表示形式供 REST API 使用。

使用任何动词发送 HTTP 请求变得简单 获取API （内置）和库，如 爱可信. Fetch API 是用于执行 HTTP 请求的内置浏览器方法，而 Axios 是我们必须在使用前安装在项目中的外部包。

在这些之间进行选择取决于您。 Fetch API 更加冗长，并且不适用于异步请求，但 Axios 是一个外部依赖项。 即便如此——许多人更喜欢使用 Axios 而不是 Fetch API。 我们将涵盖两者。

这两种方法都有优点和缺点，但重要的是要注意它们可以处理标准的 HTTP 动词—— POST, GET, PUT, PATCH, DELETE.

请注意： 如前所述，我们将学习如何执行 POST 使用 Fetch API 和 Axios 方法请求功能组件，然后在基于类的组件中使用 JSON占位符免费假帖子REST API.

在我们的实例中，我们将处理已经从模拟 API 获取的帖子列表。 我们将创建一个包含新帖子的标题和正文的表单，一旦提交，就会向模拟服务器发送一个 POST 请求以进行处理：

import { useState, useEffect } from 'react';

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

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

   return (
      <>
         <div className="add-post-container">
            <form>
               <input type="text" className="form-control" />
               <textarea className="form-control" cols="10" rows="8"></textarea>
               <button type="submit">Add Post</button>
            </form>
         </div>
         <div className="posts-container">
            {posts.map((post) => {
               return (
                  <div className="post-card" key={post.id}>
                     <h2 className="post-title">{post.title}</h2>
                     <p className="post-body">{post.body}</p>
                     <div className="button">
                        <div className="delete-btn">Delete</div>
                     </div>
                  </div>
               );
            })}
         </div>
      </>
   );
};

export default App;

现在让我们使表单功能化，以便在提交表单后我们可以将数据添加到我们网站上的帖子列表中。

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

由于 React 中引入了钩子，我们现在可以在功能组件中执行 HTTP 请求。 以前，功能组件仅用于渲染 UI。

当 JavaScript 函数（标准或 ES6）返回一个 React 元素 (JSX) 时，就会创建一个函数式组件。

我们现在使用 React 钩子，而不是像使用基于类的组件那样在构造方法中使用状态对象，例如 useState() 在将数据传递到原始数据之前存储我们的数据。

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

因为 Fetch API 是一个内置的浏览器方法，它返回一个 Promise，我们使用 .then() 和 .catch() 处理成功和失败的方法。 它还接受一个强制参数，即我们想要 POST 数据的资源/API 的 URL，以及一个指示 HTTP 请求的参数，在我们的例子中是 POST:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   
   
   
   
   const handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: title,
            body: body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((res) => res.json())
         .then((post) => {
            setPosts((posts) => [post, ...posts]);
            setTitle('');
            setBody('');
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   return (
      
   );
};

export default App;

在上面的代码中，我们创建了一个链接到表单的方法，以便在单击表单的提交按钮时触发它。 我们开始使用 e.preventDefault() 防止提交表单时页面重新加载，即 平时 您想要发生的事情，但对于我们的演示效果不佳：

const handleSubmit = (e) => {
   e.preventDefault();
};

综观 fetch() 调用，我们将URL作为第一个强制参数，第二个参数接受请求方法（POST）， body，并 header:

  • body – 包含我们要发送到 API 端点的数据，我们必须 串化，将其转换为基于文本的 JSON 表示。
  • header – 指定内容类型，在我们的例子中是 application/json，因为我们的有效负载表示为 JSON 字符串：
const handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: title,
         body: body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

最后，因为这个方法返回一个 Promise，我们将从中提取 JSON 内容（服务器的响应），更新 posts 状态以包含新数据。

为了处理错误，我们还使用了 .catch() 方法：

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

const handleSubmit = (e) => {
   e.preventDefault();
   fetch({...})
      .then((res) => res.json())
      .then((post) => {
         setPosts((posts) => [post, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

警告： 通常，您 不会在前端存储和处理数据 就像我们一样，但是由于我们正在使用的模拟 API 实际上不会保存并返回新帖子——我们人为地将它添加到它确实从第一个 GET 请求返回的列表中。 一旦帖子存储在数据库中 - 我们可以向后端发出另一个请求以提供响应以显示给用户。 这也是为什么表单提交的默认行为是重新加载页面的原因——这会触发初始 fetch() 自动获取请求并在旧帖子旁边显示新帖子。

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

我们在上一节中解释了如何使用 Fetch API 执行 POST 请求。 现在，让我们修改 handleSubmit() 方法并使用 Axios 执行 POST 请求。

Axios 是一个 HTTP 客户端库，它使用 Promise 使其易于发送 异步 HTTP 请求 到 REST 端点。 因为它是一个外部库，所以我们必须先将它安装到我们的项目中，方法是在我们项目的目录中运行以下命令：

$ npm install axios

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

const handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: title,
         body: body,
      })
      .then((res) => {
         setPosts((posts) => [res.data, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

查看上面的代码，它比 Fetch API 更容易并且需要更少的语法，因为我们不再需要转换为 JSON、处理标头甚至对我们的数据进行字符串化。 这个样板被 Axios 抽象掉了。

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

类组件中 POST 请求的处理方式与函数式组件不同，因为我们不再使用 React 钩子，而是使用 state 目的。

类组件是返回 JSX 并需要 React 扩展的 ES6 类。

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

该请求与功能组件的请求非常相似。 我们会发现一些差异的唯一领域是在将数据存储在 state 并且在使用时 state 值，因为我们不再使用 useState() 钩：

import React, { Component } from 'react';

class App extends Component {

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

   handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: this.state.title,
            body: this.state.body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((response) => response.json())
         .then((data) => {
            this.setState({ posts: [data, ...this.state.posts] });
            this.setState({ title: '' });
            this.setState({ body: '' });
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

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

export default App;

这一次，我们不再用 const 关键词。 相反，在它们前面加上 this. 单击表单的提交按钮时将触发此方法。 由于它是一种形式，我们开始使用 e.preventDefault() 防止在提交表单时重新加载页面：

handleSubmit = (e) => {
   e.preventDefault();
};

就像我们之前了解的那样，Fetch API 接受两个参数。 一个是 URL，而第二个包含诸如请求方法之类的选项（POST), body，这是我们发布的信息（必须是字符串化的），然后 headers:

handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: this.state.title,
         body: this.state.body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

知道这是一个承诺，我们现在可以附加 .then() 处理成功的方法和 .catch() 如果 HTTP 请求中存在错误或失败，则处理这种情况的方法。

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

我们已经看到了如何执行 POST 基于类的组件中的 HTTP 请求。 这与 Axios 非常相似，因为我们所要做的就是安装 Axios，然后替换 handleSubmit() 方法，所以我们现在使用 Axios 而不是 Fetch API：

handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: this.state.title,
         body: this.state.body,
         userId: 1,
      })
      .then((response) => {
         this.setState({ posts: [response.data, ...this.state.posts] });
         this.setState({ title: '' });
         this.setState({ body: '' });
      })
      .catch((error) => console.log(error));
};

结论

在本指南中，我们学习了如何使用 React 中的两种主要方法来执行 POST HTTP 请求。 我们还看到了如何在函数式组件和基于类的组件中完成它们，因此无论我们的项目中使用什么，本文都可以为我们服务。

时间戳记：

更多来自 堆栈滥用