คำขอ JavaScript GET:การใช้ Fetch API

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

Fetch API คืออะไร?

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

ประเภทของคำขอ

คำขอ GET HTTP เป็นคำขอประเภทเดียวที่คุณส่งไปยังเซิร์ฟเวอร์ได้ คำขอประเภทอื่นๆ ได้แก่ POST, PUT และ DELETE คำขอเหล่านี้สร้างแอปพลิเคชัน CRUD เป็นที่ที่เราสามารถสร้าง (POST) อ่าน (GET) อัปเดต (PUT) และทำลาย (DELETE) ข้อมูลในฐานข้อมูลของเรา

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

Fetch API ทำงานอย่างไร

Fetch API ใช้ระบบการสื่อสารแบบ Promise เพื่อเป็นการเตือนความจำ Promises เป็นฟังก์ชันแบบอะซิงโครนัสที่ห่อหุ้มตรรกะไว้ในบล็อกของโค้ดและส่งคืนการตอบสนองที่กำหนดว่าสัญญาได้รับการแก้ไขหรือปฏิเสธหรือไม่

ในฐานะผู้ใช้ Fetch API เราไม่จำเป็นต้องเขียนตรรกะของสัญญา เราแค่ต้องใช้มันเพื่อส่งคำขอและ Fetch API จะส่งคืนสัญญาภายใต้ประทุน นี่คือไวยากรณ์พื้นฐานเพื่อให้เราได้รับคำตอบ:

promise.then(response).then(json).catch(error);

คำสัญญาคือคำขอแบบอะซิงโครนัสที่เกิดขึ้นจริง fetch() เมธอดมีอยู่ในขอบเขตสากลและผ่านจุดปลายที่เราต้องการส่งคำขอ HTTP

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

let promise = fetch("https://swapi.dev/api/films/1");

หลังจากส่งคำขอ เราสามารถใช้รูปแบบสัญญากับthen และ catch หรือใช้ฟังก์ชัน async/await เพื่อรับการตอบกลับของเซิร์ฟเวอร์

รูปแบบสัญญา

promise.then(response => {
       if (response.status !== 200) {
           console.log('Looks like there was a problem. Status Code: ' +
             response.status);
           return;
       }
           response.json().then(data => {
               console.log(data);
           }).catch(error => {
               console.log(error.message);
           })
 
 
      
     })

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

มิฉะนั้น เพื่อให้การตอบสนองสามารถอ่านได้เพื่อให้เว็บไซต์ส่วนหน้าของเราใช้งานได้ เราเปลี่ยนเป็นวัตถุ JavaScript Object Notation (JSON) ด้วย json() กระบวนการ. เราต้องการสิ่งนี้เพื่อประเมินก่อนดำเนินการต่อ ดังนั้นเราจึงเชื่อมโยงสัญญากับสัญญาก่อนหน้า

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

{
       title: 'A New Hope',
       episode_id: 4,
       opening_crawl: 'It is a period of civil war.\r\n' +
         'Rebel spaceships, striking\r\n' +
         'from a hidden base, have won\r\n' +
         'their first victory against\r\n' +
         'the evil Galactic Empire.\r\n' +
         '\r\n' +
         'During the battle, Rebel\r\n' +
         'spies managed to steal secret\r\n' +
         "plans to the Empire's\r\n" +
         'ultimate weapon, the DEATH\r\n' +
         'STAR, an armored space\r\n' +
         'station with enough power\r\n' +
         'to destroy an entire planet.\r\n' +
         '\r\n' +
         "Pursued by the Empire's\r\n" +
         'sinister agents, Princess\r\n' +
         'Leia races home aboard her\r\n' +
         'starship, custodian of the\r\n' +
         'stolen plans that can save her\r\n' +
         'people and restore\r\n' +
         'freedom to the galaxy....',
       director: 'George Lucas',
       producer: 'Gary Kurtz, Rick McCallum',
       release_date: '1977-05-25',
       characters: [
         'http://swapi.dev/api/people/1/',
         'http://swapi.dev/api/people/2/',
         'http://swapi.dev/api/people/3/',
         'http://swapi.dev/api/people/4/',
         'http://swapi.dev/api/people/5/',
         'http://swapi.dev/api/people/6/',
         'http://swapi.dev/api/people/7/',
         'http://swapi.dev/api/people/8/',
         'http://swapi.dev/api/people/9/',
         'http://swapi.dev/api/people/10/',
         'http://swapi.dev/api/people/12/',
         'http://swapi.dev/api/people/13/',
         'http://swapi.dev/api/people/14/',
         'http://swapi.dev/api/people/15/',
         'http://swapi.dev/api/people/16/',
         'http://swapi.dev/api/people/18/',
         'http://swapi.dev/api/people/19/',
         'http://swapi.dev/api/people/81/'
       ],
       planets: [
         'http://swapi.dev/api/planets/1/',
         'http://swapi.dev/api/planets/2/',
         'http://swapi.dev/api/planets/3/'
       ],
       starships: [
         'http://swapi.dev/api/starships/2/',
         'http://swapi.dev/api/starships/3/',
         'http://swapi.dev/api/starships/5/',
         'http://swapi.dev/api/starships/9/',
         'http://swapi.dev/api/starships/10/',
         'http://swapi.dev/api/starships/11/',
         'http://swapi.dev/api/starships/12/',
         'http://swapi.dev/api/starships/13/'
       ],
       vehicles: [
         'http://swapi.dev/api/vehicles/4/',
         'http://swapi.dev/api/vehicles/6/',
         'http://swapi.dev/api/vehicles/7/',
         'http://swapi.dev/api/vehicles/8/'
       ],
       species: [
         'http://swapi.dev/api/species/1/',
         'http://swapi.dev/api/species/2/',
         'http://swapi.dev/api/species/3/',
         'http://swapi.dev/api/species/4/',
         'http://swapi.dev/api/species/5/'
       ],
       created: '2014-12-10T14:23:31.880000Z',
       edited: '2014-12-20T19:49:45.256000Z',
       url: 'http://swapi.dev/api/films/1/'
     }

หากเราได้รับข้อมูลนี้ที่ส่วนหน้า เราสามารถใช้เพื่อเติมการ์ดหรือตารางหรือสิ่งที่เราต้องการแสดง

ไม่ตรงกัน/รอ

เรายังสามารถใช้ฟังก์ชัน async/await เพื่อบันทึกผลลัพธ์เดียวกันได้

let getRequest = async () => {
   try {
       let fetched = await fetch("http://swapi.dev/api/films/1");
       if(fetched) {
           let read = await fetched.json()
           console.log(read);
           return read;
       }
   }
   catch (error) {
       throw new Error(error.message);
   }
}
 
getRequest()

async คีย์เวิร์ดบอกเราว่าบางส่วนของฟังก์ชันนั้นจะเป็นแบบอะซิงโครนัส เมื่อเรามาถึงคีย์เวิร์ด wait การดำเนินการของสคริปต์จะหยุดชั่วคราวจนกว่าโค้ดบรรทัดนั้นจะได้รับการประเมิน

เรามี await . สองตัว คำสั่งในฟังก์ชันนี้ เทียบได้กับ then() . ทั้งสอง ข้อความที่เรามีในตรรกะของสัญญา คำสั่งหนึ่งรอให้การดึงข้อมูลเกิดขึ้นที่ URL ที่เราส่งเข้ามา และอีกคำสั่งหนึ่งจะรอจนกว่าข้อมูลที่ดึงมาจะถูกแยกวิเคราะห์เป็น JSON เราใช้ try/catch เพื่อตรวจจับข้อผิดพลาดที่เราอาจได้รับหากมีสิ่งผิดปกติกลับมาจากการตอบกลับ

หมายเหตุสุดท้าย

เพื่อให้ Fetch API ทำงานในสภาพแวดล้อมของโหนด (เช่น หากคุณใช้ IDE เช่น Visual Studio Code) คุณจะต้อง yarn add หรือ npm install node-fetch เนื่องจากการดึงข้อมูลใช้งานได้ในสภาพแวดล้อมของเบราว์เซอร์เท่านั้น