ดึงข้อมูล API: มันคืออะไรและแตกต่างจาก WordPress REST API อย่างไร

เผยแพร่แล้ว: 2019-07-08

JavaScript พร้อมด้วย HTML และ CSS เป็นภาษาการเขียนโปรแกรมหลัก เกือบทุกไซต์บนเว็บใช้ JavaScript ดังนั้นการทำความเข้าใจ Application Programming Interface (API) ดั้งเดิมจึงเป็นสิ่งสำคัญหากคุณต้องการเป็นนักพัฒนาที่รอบรู้

ในโพสต์นี้ เราจะแนะนำให้คุณรู้จักกับ Fetch API และสิ่งที่สามารถทำได้ จากนั้นเราจะหารือเกี่ยวกับความแตกต่างจาก WordPress REST API และอธิบายว่าเมื่อใดที่คุณอาจต้องการใช้ในการพัฒนา WordPress ของคุณ

กระโดดเข้าไปเลย!

บทนำสู่การดึงข้อมูล API

เช่นเดียวกับ API ทั้งหมด Fetch API ใช้สำหรับส่งและรับข้อมูลระหว่างแอปพลิเคชัน ตามชื่อของมัน ส่วนใหญ่จะใช้สำหรับ 'ดึงข้อมูล' ทรัพยากรโดยใช้คำขอ HTTP แล้วแก้ไข ด้วยวิธีนี้ มันทำงานเหมือนกับ XMLHttpRequest

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

โดยพื้นฐานแล้ว คำสัญญาระบุว่าการกระทำบางอย่างจะเกิดขึ้นในที่สุด และให้ข้อมูลเกี่ยวกับสิ่งที่ควรเกิดขึ้นต่อไปเมื่อเกิดขึ้น คำสัญญามักจะ 'แก้ไข' (ทำให้เกิดการตอบสนอง) หรือ 'ปฏิเสธ' (ทำให้เกิดข้อผิดพลาด)

หากสัญญาได้รับการแก้ไข ตัวจัดการ .then จะดำเนินการตามที่ระบุ ในกรณีที่สัญญาถูกปฏิเสธ อาจแสดงข้อความแสดงข้อผิดพลาดแทนโดยใช้ฟังก์ชัน . catch เนื่องจาก JavaScript เป็นแบบอะซิงโครนัส ทั้งหมดนี้จึงเกิดขึ้นในพื้นหลังโดยไม่ป้องกันไม่ให้แสดงหน้าเว็บที่เหลือ

ดังนั้นเมื่อเรารวมทั้งหมดนี้เข้าด้วยกัน เราจะได้ API ที่ดึงทรัพยากรตามที่สัญญาไว้ จากนั้นจะส่งคืนออบเจ็กต์การตอบสนองหากสัญญาเหล่านั้นได้รับการแก้ไข หรือข้อผิดพลาดหากถูกปฏิเสธ คุณยังสามารถเพิ่มตัวจัดการ . then หรือ . catch เพื่อติดตามการตอบสนองหรือข้อผิดพลาดทันทีด้วยการดำเนินการอื่น

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

Fetch API แตกต่างจาก WordPress REST API อย่างไร

กล่าวโดยย่อ นอกเหนือจากข้อเท็จจริงที่ว่าพวกเขาทั้งสองเป็น API แล้ว Fetch API และ WordPress REST API นั้นแตกต่างกันแทบทุกด้าน ความแตกต่างที่สำคัญบางประการ ได้แก่ :

  • Fetch API ส่งคืนข้อมูลตามที่สัญญาไว้ ในขณะที่ WordPress API ส่งคืนข้อมูลเป็น JSON
  • คุณต้องใช้ตัวจัดการ .then เพื่อแปลงข้อมูลที่ส่งคืนโดย Fetch API เป็น JSON
  • คุณสามารถส่งคืนข้อมูลในรูปแบบอื่นที่ไม่ใช่ JSON ผ่าน Fetch API
  • ในการใช้คำสัญญากับ WordPress REST API คุณจะต้องเขียนคำสัญญาด้วยตนเองหลังจากเรียกใช้ API

หากคุณต้องการใช้ Fetch API กับ WordPress คุณเพียงแค่เรียกใช้ฟังก์ชันดึงข้อมูลในโค้ด JavaScript ของคุณ ปฏิบัติตามฟังก์ชันนั้นด้วยตัวจัดการ .then เพื่อเข้าถึงเนื้อหา จากนั้นคุณสามารถแสดงบนเว็บไซต์ของคุณหรือในเว็บแอปพลิเคชันของคุณ

2 ครั้งคุณอาจต้องการใช้ Fetch API เหนือ REST API

คุณสามารถทำอะไรก็ได้ที่อยากทำกับ Fetch API ให้สำเร็จโดยใช้ WordPress REST API แทน อย่างไรก็ตาม Fetch API มีฟีเจอร์ที่มีประโยชน์สองสามอย่างที่ไม่สามารถเข้าถึงได้ผ่าน WordPress API ดั้งเดิม ลองดูสองตัวอย่าง

1. ส่งคืนการตอบกลับที่ไม่ใช่ JSON

ดังที่เราได้กล่าวไปแล้ว เมื่อคุณใช้ WordPress REST API จะส่งคืนข้อมูล JSON ตามค่าเริ่มต้น อย่างไรก็ตาม อาจมีบางครั้งที่คุณต้องการคำตอบในรูปแบบอื่น เพื่อให้ใช้งานได้กับ WordPress API คุณจะต้องแปลง JSON เป็นรูปแบบที่คุณต้องการที่ใดที่หนึ่ง

ในทางกลับกัน Fetch API สามารถส่งคืนข้อมูลในรูปแบบต่างๆ ได้หลากหลาย แม้ว่า JSON น่าจะเป็นรูปแบบที่ได้รับความนิยมมากที่สุดสำหรับการตอบกลับ Fetch API คุณยังสามารถใช้เพื่อส่งคืนการตอบกลับในรูปแบบอื่นๆ ที่หลากหลาย รวมถึง XML, HTML, ข้อความธรรมดา และ Blobs

ในการทำเช่นนั้น คุณเพียงแค่เปลี่ยนวิธีการตอบกลับที่ระบุภายในตัวจัดการ .then ที่คุณใช้เพื่อเข้าถึงเนื้อหาที่คุณดึงมา ตัวอย่างเช่น นี่คือการเรียก Fetch API ที่ง่ายมาก ตามด้วยตัวจัดการ .then ที่ส่งคืนการตอบกลับเป็น JSON:

 ดึงข้อมูล ('https://jsonplaceholder.typicode.com/todos')
  .then(การตอบสนอง => response.json())
  .then(data => console.log(JSON.stringify(data)))

ดังนั้น หากคุณต้องการส่งคืนข้อมูลเป็น XML แทน คุณสามารถใช้ การ response.text แทนการ response.json ซึ่งง่ายกว่าการแปลง หลังจาก ดึงข้อมูลด้วย WordPress REST API

2. การใช้คำสัญญาเพื่อดำเนินการฟังก์ชันในลำดับเฉพาะ

นอกจากนี้ หากคุณต้องการใช้คำสัญญากับการตอบสนองต่อการเรียก WordPress REST API ของคุณ การใช้ Fetch API แทนอาจมีประสิทธิภาพมากกว่า ด้วย WordPress API คุณจะต้องเขียนคำสัญญาของคุณเองตามคำขอและการตอบกลับ ในขณะที่ Fetch API จะคืนคำสัญญาให้กับคุณ

หากคุณกำลังใช้ API เพื่อขอข้อมูล และต้องการใช้ฟังก์ชัน JavaScript เพื่อทำอย่างอื่นกับข้อมูลนั้น Fetch API อาจเป็นวิธีที่จะไป ตัวอย่างเช่น ลองพิจารณาตัวอย่างนี้:

 var eventsURL = "https://api.seatgeek.com/2/events?q=amway-center&client_id=MTI3NjI2NjF8MTUzNDYxMjQ1MS4zNA";

ดึงข้อมูล (eventsURL)
  .then((ตอบกลับ) => response.json())
  .then (ฟังก์ชัน (evnt) {
  ส่งคืน evnt.events.map (ฟังก์ชัน (เหตุการณ์){
    var singleEvent = document.createElement('li');
    var eventDate = document.createElement('ช่วง');
    var newDate = ช่วงเวลา (event.datetime_local).format('LLL');
    singleEvent.innerHTML = event.title;
    eventDate.innerHTML = newDate;
    ผนวก (รายการเหตุการณ์, singleEvent);
    ผนวก (singleEvent, eventDate);
  })

})
.catch (ฟังก์ชัน (ข้อผิดพลาด) {
  console.log('เกิดข้อผิดพลาดระหว่างการดึงข้อมูล:' + error.message);
});

ที่นี่ เราสามารถเรียกใช้ฟังก์ชันเหตุการณ์โดยเพิ่มตัวจัดการ .then ให้กับคำสัญญาที่ส่งคืนโดย Fetch API เพื่อแสดงกิจกรรมจากไซต์ SeatGeek สัญญาสามารถทำให้การใช้ JavaScript มากขึ้นงให้ทำความสะอาดรหัสของคุณและสามารถอ่านได้มากขึ้น ในทางกลับกัน สิ่งนี้จะทำให้การพัฒนาของคุณมีประสิทธิภาพและประสิทธิผลมากขึ้น

บทสรุป

เมื่อพูดถึงการพัฒนาเว็บ คุณจะไปได้ไม่ไกลถ้าไม่มี JavaScript การมีหมายเลขอ้างอิงบน API ดั้งเดิมจะช่วยให้คุณดึงทรัพยากรที่คุณปรับเปลี่ยนเพื่อใช้บนเว็บไซต์หรือเว็บแอปพลิเคชันของคุณได้อย่างง่ายดาย

ในบทความนี้ เราได้พูดถึงสองตัวอย่างว่าเมื่อใดที่คุณอาจต้องการใช้ JavaScript Fetch API แทน WordPress REST API:

  1. ส่งคืนการตอบกลับที่ไม่ใช่ JSON ด้วย Fetch API คุณสามารถส่งคืนข้อมูลได้หลากหลายรูปแบบ ในขณะที่ WordPress REST API ส่งคืนเฉพาะ JSON
  2. การใช้คำสัญญาเพื่อดำเนินการฟังก์ชันในลำดับเฉพาะ เนื่องจาก Fetch API ส่งคืนข้อมูลตามที่สัญญาไว้ คุณจึงไม่ต้องเขียนข้อมูลของคุณเอง

คุณมีคำถามอื่นๆ เกี่ยวกับการดึงข้อมูล API หรือไม่ ทิ้งไว้ในส่วนความคิดเห็นด้านล่าง!

ภาพขนาดย่อของบทความ Sudowoodo / shutterstock.com