บทนำ
เมื่อทำงานกับ 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
.
หมายเหตุ ตามที่ระบุไว้ก่อนหน้านี้เราจะเรียนรู้วิธีการดำเนินการ 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;
มาทำให้ฟอร์มใช้งานได้แล้ว เพื่อให้เราสามารถเพิ่มข้อมูลไปยังรายการโพสต์บนเว็บไซต์ของเราเมื่อส่งแบบฟอร์มแล้ว
วิธีดำเนินการคำขอ 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()
วิธี:
ดูคู่มือเชิงปฏิบัติสำหรับการเรียนรู้ Git ที่มีแนวทางปฏิบัติที่ดีที่สุด มาตรฐานที่ยอมรับในอุตสาหกรรม และเอกสารสรุปรวม หยุดคำสั่ง Googling 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()
รับคำขอและแสดงโพสต์ใหม่พร้อมกับโพสต์เก่าโดยอัตโนมัติ
วิธีดำเนินการคำขอ 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 นอกจากนี้เรายังเห็นว่าสามารถทำได้ทั้งในองค์ประกอบการทำงานและส่วนประกอบตามคลาส ดังนั้นบทความนี้สามารถให้บริการเราได้โดยไม่คำนึงถึงสิ่งที่จะใช้ในโครงการของเรา