พารามิเตอร์ที่สองในการดึงข้อมูล ()

เมื่อเราพยายามใช้fetch()ฟังก์ชันในชั้นเรียน เรามักจะใช้เพื่อรับข้อมูลจาก API บนเว็บไซต์

https://reqres.in/เป็นเว็บไซต์ที่ให้บริการ API สำหรับนักพัฒนาในการทดสอบรหัสของพวกเขา นักพัฒนาสามารถทดสอบวิธี HTTP ต่างๆ และได้รับการตอบสนองจริงแต่เป็นข้อมูลปลอม (REQRES, 2023) เราจะใช้เว็บไซต์นี้เพื่อทดสอบรหัสของเราหลายครั้ง

เช่น เราสามารถเอาข้อมูลปลอมมารู้ชื่อผู้ใช้ได้https://reqres.in/ด้วยfetch().

หากคุณคลิก ปุ่ม ทดสอบการดึงข้อมูล () เพื่อรับข้อมูลการดึงข้อมูลจะพยายามดึงข้อมูลจาก 'https://reqres.in/api/users/2'ด้วยวิธีการ GET คุณสามารถเห็น "Janet" ต่อท้ายด้านล่าง

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

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

พารามิเตอร์ที่สองควรเป็นวัตถุ และภายในวัตถุนี้ คุณสามารถรวมพารามิเตอร์ย่อยได้หลายรายการ รวมถึงเนื้อหา ส่วนหัว วิธีการ... (MDN, 2023)

มีตัวอย่าง:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  };

แล้วเราจะใช้มันอย่างไร?

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

.catch((ข้อผิดพลาด) =>{})

อย่างที่เราทราบกันดีว่า ฟังก์ชัน fetch() จะส่งa Promise Objectกลับ อย่างไรก็ตาม จะเกิดอะไรขึ้นหากเซิร์ฟเวอร์ไม่ตอบสนองและไม่ปฏิบัติตามสัญญา

จะมีข้อผิดพลาด!

ดังนั้นเราต้องใช้catch((error) => {})เพื่อจับข้อผิดพลาดเพื่อหลีกเลี่ยงการหยุดทำงาน

มาดูโค้ดตัวอย่างกัน

ในตัวอย่างนี้ ฉัน 'บังเอิญ' ได้รับลิงก์ที่ไม่ถูกต้อง ดังนั้นคำสัญญาจะไม่เป็นจริงและจะมีข้อผิดพลาด ดังนั้นหากผู้ใช้คลิกปุ่มโพสต์ทดสอบ คอนโซลจะพิมพ์ข้อความ 'ข้อผิดพลาด!!!'

การใช้วัตถุตอบสนองมากขึ้น

เราได้กล่าวถึงสถานการณ์เมื่อมีข้อผิดพลาด และ Promise Object ไม่ได้รับการเติมเต็ม แต่ถ้าอ็อบเจกต์สัญญาที่ส่งคืนโดยสำเร็จfetch()มันจะส่งคืนอ็อบเจกต์ตอบกลับ

มีคุณสมบัติอินสแตนซ์บางอย่าง (MDN, 2023):

• ตอบกลับตกลง
• ตอบกลับสถานะ
• ข้อความตอบกลับสถานะ
• ตอบกลับ.url
• …

ฉันใช้Response.statusซึ่งส่งคืนรหัสสถานะ HTTP และResponse.okซึ่งส่งคืนค่าบูลีนเราสามารถดูว่าการดึงข้อมูลสำเร็จหรือไม่

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

ยกเลิกการดึงข้อมูล

ผู้ใช้ยังสามารถยกเลิกการดึงข้อมูลได้โดยใช้ปุ่มAbortController Object.

เราจำเป็นต้องสร้างAbortController Objectแยกต่างหาก

let controller = new AbortController();

ดังนั้นพารามิเตอร์ที่สองใหม่ของเราคือ:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  signal: controller.signal
  };

ฉันกำหนดช่วงเวลาในการทำแท้ง () ดังนั้น เมื่อฉันคลิกยกเลิกก่อน และ Test Post จะแสดง AbortError ในคอนโซล และสถานะ HTTP และรหัสจะไม่แสดงใต้ปุ่มโพสต์ทดสอบเหมือนที่เราเคยทำมาก่อน

อ้างอิง

นพ. (2566). Fetch() — เว็บ apis: MDN API ของเว็บ | นพ. สืบค้นเมื่อ 31 มีนาคม 2566 จากhttps://developer.mozilla.org/en-US/docs/Web/API/fetch

ความต้องการ (2566). API ส่วนที่เหลือที่โฮสต์พร้อมที่จะตอบสนองต่อคำขอ Ajax ของคุณ ต้องการ สืบค้นเมื่อ 31 มีนาคม 2566 จากhttps://reqres.in/

นพ. (2566). การตอบสนอง — web apis: MDN API ของเว็บ | นพ. สืบค้นเมื่อ 31 มีนาคม 2566 จากhttps://developer.mozilla.org/en-US/docs/Web/API/Response

นพ. (2566). Abortcontroller — เว็บ apis: MDN API ของเว็บ | นพ. สืบค้นเมื่อ 31 มีนาคม 2566 จากhttps://developer.mozilla.org/en-US/docs/Web/API/AbortController