โพสต์คำขอ HTTP ใน React

บทนำ

เมื่อทำงานกับ API เรามักจะต้องการส่งข้อมูลไปยังเซิร์ฟเวอร์เพื่อทำการประมวลผล ตัวอย่างเช่น หากเรามีรายการสิ่งที่ต้องทำและต้องการเพิ่มเข้าไป โดยอาจผ่านการส่งแบบฟอร์ม เราใช้คำขอ POST HTTP เพื่อส่งคำขอพร้อมเพย์โหลดสำหรับการประมวลผลและความคงอยู่ที่อาจเกิดขึ้น

ในบทความนี้ เราจะเรียนรู้วิธีดำเนินการตามคำขอ POST HTTP ใน React โดยใช้วิธีการทั่วไปสองวิธี: Fetch API และ Axios นอกจากนี้เรายังจะได้ทราบวิธีการทำสิ่งนี้ในส่วนประกอบที่ทำงานและตามคลาส

การใช้ Fetch API การส่งคำขอ POST HTTP ด้วย React นั้นง่ายเหมือน:

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 (ในตัว) และไลบรารีเช่น Axios. Fetch API เป็นวิธีเบราว์เซอร์ในตัวสำหรับดำเนินการคำขอ HTTP ในขณะที่ Axios เป็นแพ็คเกจภายนอกที่เราต้องติดตั้งในโปรเจ็กต์ของเราก่อนใช้งาน

การเลือกระหว่างสิ่งเหล่านี้ขึ้นอยู่กับคุณ Fetch API นั้นละเอียดกว่าและไม่ทำงานกับคำขอแบบอะซิงโครนัส แต่ Axios เป็นการพึ่งพาภายนอก ถึงกระนั้น หลายคนชอบทำงานกับ Axios มากกว่า Fetch API เราจะครอบคลุมทั้งสอง

ทั้งสองวิธีมีข้อดีและข้อเสีย แต่สิ่งสำคัญคือต้องสังเกตว่าพวกเขาสามารถจัดการกับกริยา HTTP มาตรฐานได้ - POST, GET, PUT, PATCH, DELETE.

ในกรณีของเรา เราจะใช้รายการโพสต์ที่เราดึงมาจาก 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;

มาทำให้ฟอร์มใช้งานได้แล้ว เพื่อให้เราสามารถเพิ่มข้อมูลไปยังรายการโพสต์บนเว็บไซต์ของเราเมื่อส่งแบบฟอร์มแล้ว

วิธีดำเนินการคำขอ POST HTTP ในองค์ประกอบการทำงานของ React

ตอนนี้เราสามารถดำเนินการร้องขอ HTTP ในองค์ประกอบการทำงานได้ด้วยการแนะนำ hooks ใน React ก่อนหน้านี้ ส่วนประกอบการทำงานถูกใช้สำหรับการแสดงผล UI เท่านั้น

องค์ประกอบการทำงานจะถูกสร้างขึ้นเมื่อฟังก์ชัน JavaScript (มาตรฐานหรือ ES6) ส่งคืนองค์ประกอบ React (JSX)

แทนที่จะใช้ state Object ในเมธอด Constructor เช่นเดียวกับส่วนประกอบแบบคลาส ตอนนี้เราใช้ React hooks เช่น useState() เพื่อเก็บข้อมูลของเราก่อนที่จะส่งต่อไปยังข้อมูลเดิม

วิธีดำเนินการคำขอ POST HTTP ในองค์ประกอบการทำงานของ React ด้วย Fetch API

เนื่องจาก Fetch API เป็นวิธีเบราว์เซอร์ในตัวที่ส่งคืน a Promiseเราใช้ .then() และ .catch() วิธีการจัดการกับความสำเร็จและความล้มเหลว นอกจากนี้ยังยอมรับอาร์กิวเมนต์บังคับ ซึ่งเป็น URL ของทรัพยากร/API ที่เราต้องการโพสต์ข้อมูล เช่นเดียวกับอาร์กิวเมนต์ที่ระบุคำขอ 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',
      },
   })
};

สุดท้าย เนื่องจากวิธีนี้คืนค่า a Promiseเราจะแยกเนื้อหา JSON ออกมา (การตอบสนองของเซิร์ฟเวอร์) อัปเดต posts รัฐเพื่อรวมข้อมูลใหม่

เพื่อจัดการกับข้อผิดพลาด เรายังใช้ .catch() วิธี:

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

วิธีดำเนินการคำขอ POST HTTP ในองค์ประกอบการทำงานของ React ด้วย Axios

เราอธิบายวิธีดำเนินการคำขอ POST ด้วย Fetch API ในส่วนก่อนหน้า ตอนนี้มาแก้ไข handleSubmit() เมธอดและดำเนินการร้องขอ POST ด้วย Axios แทน

Axios เป็นไลบรารีไคลเอนต์ HTTP ที่ใช้คำสัญญาเพื่อให้ง่ายต่อการส่ง คำขอ 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

วิธีดำเนินการ POST HTTP Request ใน Class Component ของ React

คำขอ POST ในองค์ประกอบคลาสได้รับการจัดการแตกต่างจากองค์ประกอบการทำงานเพราะเราไม่ได้ใช้ React hooks อีกต่อไปและใช้แทน state วัตถุ.

องค์ประกอบของคลาสคือคลาส ES6 ที่ส่งคืน JSX และต้องการส่วนขยาย React

วิธีดำเนินการคำขอ POST HTTP ในองค์ประกอบคลาสของ React ด้วย Fetch API

คำขอนั้นคล้ายกับส่วนประกอบที่ใช้งานได้มาก พื้นที่เดียวที่เราจะพบความแตกต่างคือเมื่อจัดเก็บข้อมูลใน 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;

ครั้งนี้ เราจะไม่ประกาศ method ด้วย the . อีกต่อไป 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

วิธีดำเนินการคำขอ POST HTTP ในองค์ประกอบคลาสของ React ด้วย Axios

เราได้เห็นวิธีการปฏิบัติ POST คำขอ HTTP ในส่วนประกอบตามคลาส สิ่งนี้คล้ายกับ Axios มาก เนื่องจากสิ่งที่เราต้องทำคือติดตั้ง Axios แล้วแทนที่ handleSubmit() ดังนั้นเราจึงใช้ Axios แทนการดึงข้อมูล 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 นอกจากนี้เรายังเห็นว่าสามารถทำได้ทั้งในองค์ประกอบการทำงานและส่วนประกอบตามคลาส ดังนั้นบทความนี้สามารถให้บริการเราได้โดยไม่คำนึงถึงสิ่งที่จะใช้ในโครงการของเรา