ĐĂNG Yêu cầu HTTP trong React

Giới thiệu

Khi làm việc với API, chúng ta thường muốn gửi dữ liệu đến máy chủ để xử lý. Ví dụ: nếu chúng tôi có danh sách việc cần làm và muốn thêm vào danh sách đó, có thể thông qua việc gửi biểu mẫu, chúng tôi sử dụng các yêu cầu POST HTTP để gửi yêu cầu có tải trọng để xử lý và khả năng duy trì lâu dài.

Trong bài viết này, chúng ta sẽ tìm hiểu cách thực hiện các yêu cầu POST HTTP trong React bằng hai cách tiếp cận phổ biến: API tìm nạp và Axios. Chúng ta cũng sẽ biết cách thực hiện điều này trong các thành phần chức năng và dựa trên lớp.

Sử dụng API tìm nạp, gửi yêu cầu POST HTTP bằng React dễ dàng như:

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 cung cấp cho chúng tôi một giải pháp thay thế tinh tế để gửi các yêu cầu HTTP POST:

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

Nếu bạn muốn tìm hiểu thêm về những phương pháp này và cách chúng hoạt động – vui lòng đọc phần còn lại của hướng dẫn!

Yêu cầu POST HTTP là gì?

Đúng như tên gọi, các yêu cầu POST được sử dụng để đăng dữ liệu lên điểm cuối – sau đó điểm cuối này thường xử lý và lưu dữ liệu vào cơ sở dữ liệu. Dữ liệu này có thể đến từ một biểu mẫu, được lưu trong một đối tượng hoặc được lấy theo cách khác – nhưng nó thường được chuyển đổi thành dạng biểu diễn JSON để API REST sử dụng.

Việc gửi yêu cầu HTTP bằng bất kỳ động từ nào được thực hiện đơn giản bằng Fetch API (tích hợp sẵn) và các thư viện như Axios. API tìm nạp là một phương thức trình duyệt tích hợp để thực hiện các yêu cầu HTTP, trong khi Axios là gói bên ngoài mà chúng ta phải cài đặt trong dự án của mình trước khi sử dụng.

Lựa chọn giữa những điều này là tùy thuộc vào bạn. API tìm nạp chi tiết hơn và không hoạt động với các yêu cầu không đồng bộ, nhưng Axios là một phần phụ thuộc bên ngoài. Mặc dù vậy – nhiều người thích làm việc với Axios hơn là API tìm nạp. Chúng tôi sẽ bao gồm cả hai.

Cả hai phương pháp đều có ưu điểm và nhược điểm, nhưng điều quan trọng cần lưu ý là chúng có thể xử lý các động từ HTTP tiêu chuẩn – POST, GET, PUT, PATCH, DELETE.

Trong trường hợp của chúng tôi, chúng tôi sẽ xử lý danh sách các bài đăng mà chúng tôi đã tìm nạp từ một API mô phỏng. Chúng tôi sẽ tạo một biểu mẫu lấy tiêu đề và nội dung của bài đăng mới và sau khi gửi, sẽ gửi yêu cầu POST đến máy chủ mô phỏng để xử lý:

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;

Bây giờ, hãy làm cho biểu mẫu hoạt động để chúng ta có thể thêm dữ liệu vào danh sách bài đăng trên trang web của mình sau khi biểu mẫu được gửi.

Cách thực hiện yêu cầu POST HTTP trong Thành phần chức năng của React

Giờ đây chúng ta có thể thực hiện các yêu cầu HTTP trong các thành phần chức năng nhờ vào sự ra đời của hook trong React. Trước đây, các thành phần chức năng chỉ được sử dụng để hiển thị giao diện người dùng.

Một thành phần chức năng được tạo khi một hàm JavaScript (tiêu chuẩn hoặc ES6) trả về phần tử React (JSX).

Thay vì sử dụng đối tượng trạng thái trong phương thức khởi tạo như với các thành phần dựa trên lớp, giờ đây chúng ta sử dụng các hook React như useState() để lưu trữ dữ liệu của chúng tôi trước khi chuyển nó vào dữ liệu gốc.

Cách thực hiện yêu cầu POST HTTP trong thành phần chức năng của React bằng API tìm nạp

Bởi vì API tìm nạp là một phương thức trình duyệt tích hợp trả về một Promise, chúng tôi sử dụng .then() và .catch() phương pháp xử lý thành công và thất bại. Nó cũng chấp nhận một đối số bắt buộc, đó là URL của tài nguyên/API mà chúng ta muốn POST dữ liệu vào đó, cũng như một đối số cho biết yêu cầu HTTP, trong trường hợp của chúng ta là 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;

Trong đoạn mã trên, chúng tôi đã tạo một phương thức mà chúng tôi sẽ liên kết đến biểu mẫu để nó được kích hoạt khi nhấp vào nút gửi của biểu mẫu. Chúng tôi bắt đầu bằng cách sử dụng e.preventDefault() để ngăn trang tải lại khi gửi biểu mẫu, đó là thường điều bạn muốn xảy ra nhưng lại không phù hợp với bản demo của chúng tôi:

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

Hãy nhìn vào fetch() cuộc gọi, chúng tôi đã thêm URL làm tham số bắt buộc đầu tiên và tham số thứ hai lấy trong phương thức yêu cầu (POST), body, và header:

• body – chứa dữ liệu chúng tôi muốn gửi đến điểm cuối API mà chúng tôi phải xâu chuỗi, biến nó thành một biểu diễn JSON dựa trên văn bản.
• header – chỉ định loại nội dung, trong trường hợp của chúng tôi là application/json, vì tải trọng của chúng tôi được biểu thị dưới dạng chuỗi 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',
      },
   })
};

Cuối cùng, vì phương thức này trả về một Promise, chúng tôi sẽ trích xuất nội dung JSON ra khỏi nó (phản hồi của máy chủ), cập nhật posts state để bao gồm dữ liệu mới.

Để xử lý lỗi chúng tôi cũng sử dụng .catch() phương pháp:

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

Cách thực hiện yêu cầu POST HTTP trong thành phần chức năng của React với Axios

Chúng tôi đã giải thích cách thực hiện các yêu cầu POST bằng API tìm nạp trong phần trước. Bây giờ, hãy sửa đổi handleSubmit() thay vào đó thực hiện các yêu cầu POST bằng Axios.

Axios là thư viện máy khách HTTP sử dụng các lời hứa để giúp gửi dễ dàng yêu cầu HTTP không đồng bộ đến điểm cuối REST. Vì nó là một thư viện bên ngoài nên trước tiên chúng ta phải cài đặt nó trong dự án của mình bằng cách chạy lệnh sau trong thư mục dự án của chúng ta:

$ npm install axios

Sau khi cài đặt thành công Axios, chúng ta có thể tiến hành thực hiện yêu cầu POST của mình:

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);
      });
};

Nhìn vào mã ở trên, nó dễ dàng hơn nhiều và yêu cầu ít cú pháp hơn API tìm nạp vì chúng tôi không còn cần phải chuyển đổi sang JSON, làm việc với các tiêu đề và thậm chí xâu chuỗi dữ liệu của mình nữa. Bản tóm tắt này được Axios trừu tượng hóa.

Cách thực hiện yêu cầu POST HTTP trong thành phần lớp của React

Yêu cầu POST trong các thành phần lớp được xử lý khác với trong các thành phần chức năng vì chúng tôi không còn sử dụng móc React nữa mà thay vào đó sử dụng state vật.

Thành phần lớp là lớp ES6 trả về JSX và yêu cầu các phần mở rộng React.

Cách thực hiện yêu cầu POST HTTP trong thành phần lớp của React bằng API tìm nạp

Yêu cầu này rất giống với yêu cầu của các thành phần chức năng. Các lĩnh vực duy nhất chúng tôi tìm thấy một số khác biệt là khi lưu trữ dữ liệu trong state và khi sử dụng state giá trị bởi vì chúng tôi không còn sử dụng useState() móc:

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;

Lần này, chúng ta không còn khai báo các phương thức với const từ khóa. Thay vào đó, hãy thêm tiền tố vào chúng this. Phương pháp này sẽ được kích hoạt khi nhấp vào nút gửi của biểu mẫu. Vì đây là một biểu mẫu nên chúng tôi bắt đầu bằng cách sử dụng e.preventDefault() để ngăn trang tải lại khi biểu mẫu được gửi:

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

Giống như chúng ta đã tìm hiểu trước đó, API tìm nạp có hai tham số. Một là URL, trong khi thứ hai chứa các tùy chọn như phương thức yêu cầu (POST), body, đó là thông tin chúng tôi đăng (phải được xâu chuỗi) và sau đó là 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',
      },
   })
};

Biết đây là một lời hứa, bây giờ chúng ta có thể đính kèm .then() phương pháp xử lý thành công và .catch() phương pháp xử lý tình huống nếu có lỗi hoặc lỗi trong yêu cầu HTTP.

Cách thực hiện yêu cầu POST HTTP trong thành phần lớp của React với Axios

Chúng tôi đã thấy cách thực hiện POST Yêu cầu HTTP trong các thành phần dựa trên lớp. Điều này rất giống với Axios, vì tất cả những gì chúng ta phải làm là cài đặt Axios và sau đó thay thế handleSubmit() nên hiện tại chúng tôi sử dụng Axios thay vì 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));
};

Kết luận

Trong hướng dẫn này, chúng ta đã học cách sử dụng hai phương thức chính trong React để thực hiện các yêu cầu POST HTTP. Chúng tôi cũng đã thấy cách chúng có thể được thực hiện trong cả thành phần chức năng và thành phần dựa trên lớp, vì vậy bài viết này có thể phục vụ chúng tôi bất kể những gì được sử dụng trong dự án của chúng tôi.