home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

จะโหลดข้อมูลจากเซิร์ฟเวอร์ใน React Native ได้อย่างไร?

ในการโหลดข้อมูลจากเซิร์ฟเวอร์ คุณสามารถใช้ ดึง API ที่คล้ายกับ XMLHttpRequest หรือ API เครือข่ายอื่น ๆ

เป็นเรื่องง่ายมากที่จะส่งคำขอไปยังเซิร์ฟเวอร์โดยใช้การดึงข้อมูล ดูโค้ดต่อไปนี้ −

fetch('https://jsonplaceholder.typicode.com/posts/1') .then((response) => response.json()) .then((responseJson) => console.log(responseJson)) 
ดึงข้อมูล('https://jsonplaceholder.typicode.com/posts/1');
 

 ในโค้ดด้านบนนี้ เรากำลังดึงไฟล์ JSON https://jsonplaceholder.typicode.com/posts/1 และพิมพ์ข้อมูลไปยังคอนโซล การเรียก fetch() API ที่ง่ายที่สุดนั้นใช้อาร์กิวเมนต์เดียว นั่นคือเส้นทางที่คุณต้องการดึงข้อมูลและส่งคืนสัญญาพร้อมการตอบสนอง
 

 การดึงข้อมูล API ส่งคืนสัญญาพร้อมการตอบสนอง http เพื่อรับเนื้อหา JSON จากการตอบสนอง เราจำเป็นต้องใช้เมธอด json()
 

 พารามิเตอร์ตัวที่สองในการดึงข้อมูล api เป็นอ็อบเจ็กต์ที่มีเมธอด เช่น (GET, POST) ส่วนหัว ข้อมูลที่คุณต้องการโพสต์ เป็นต้น
 

 นี่คือตัวอย่างการทำงานที่แสดงวิธีการรับข้อมูลจากเซิร์ฟเวอร์และแสดงให้ผู้ใช้เห็น
 
ตัวอย่าง:GET data โดยใช้ fetch API
 

 ข้อมูลถูกเริ่มต้นให้ว่างเปล่าเมื่อเริ่มต้นดังแสดงด้านล่าง -
 
state ={ data:''}
 
รายละเอียดเกี่ยวกับ componentDidMount()
 

 เรียก API การดึงข้อมูลภายในฟังก์ชัน componentDidMount() componentDidMount() ถูกเรียกทันทีหลังจากติดตั้งส่วนประกอบ นั่นคือ หลังจากที่องค์ประกอบทั้งหมดถูกแสดงบนหน้า
 

 นี่คือรหัสสำหรับสิ่งเดียวกัน -
 
componentDidMount =() => { fetch('https://jsonplaceholder.typicode.com/posts/1', { method:'GET' }) .then ((response) => response.json()) .then ((responseJson) => { console.log (responseJson); this.setState ({ data:responseJson }) }) .catch ((ข้อผิดพลาด) => { console.error (ข้อผิดพลาด); });} 

 ข้อมูลจาก url :https://jsonplaceholder.typicode.com/posts/1 มีดังนี้ -
 
{ "userId":1, "id":1, "title":"sunt aut facere repellat Provident occaecatiexcepturi optio reprehenderit", "body":"quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt remeveniet architecto"}
 

 เราสนใจแสดงข้อความภายในเนื้อหา
 

 ตัวแปรข้อมูลได้รับการอัพเดตโดยใช้เมธอด setState ดังที่แสดงด้านล่าง -
 
this.setState({ data:responseJson})
 

 ดังนั้นตอนนี้ this.state.data.body มีข้อมูลจากเซิร์ฟเวอร์ที่สามารถใช้แสดงให้ผู้ใช้เห็นดังที่แสดงด้านล่าง -
 
render() { return (   {this.state.data.body}   )}
 

 นี่คือรหัสการทำงานเพื่อรับข้อมูลจากเซิร์ฟเวอร์โดยใช้การดึงข้อมูล Api -
 
นำเข้า React { ส่วนประกอบ } จาก "react" นำเข้า { Text, View } จาก "react-native"; class HttpExample ขยาย Component { state ={ data:'' } componentDidMount =() => { fetch (' https://jsonplaceholder.typicode.com/posts/1', { method:'GET' }) .then((response) => response.json()) .then((responseJson) => { console.log() responseJson); this.setState({ data:responseJson }) }) .catch((error) => { console.error(error); });}render() { return ( <ดู> <ข้อความ> {นี่. state.data.body}   ) }}const App =() => { return (  )} ส่งออกแอปเริ่มต้น
 
ผลลัพธ์
 

 จะโหลดข้อมูลจากเซิร์ฟเวอร์ใน React Native ได้อย่างไร?