การใช้ Node.js Fetch API: คู่มือฉบับสมบูรณ์

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

💡

การเขียนโปรแกรมเว็บแอป, APIs และระบบต่างๆ กำหนดให้นักพัฒนาต้องมีความรู้จากหลายๆ ด้าน - ด้านหนึ่งที่ควรกล่าวถึงคือภาษาโปรแกรม

หากคุณกำลังดิ้นรนกับการเรียนรู้ภาษาโปรแกรมต่างๆ คุณควรลองใช้ Apidog ซึ่งเป็นเครื่องมือ API ที่ครอบคลุม ด้วย Apidog คุณสามารถสร้างโค้ดไคลเอนต์ได้ด้วยการคลิกเมาส์เพียงไม่กี่ครั้ง

หากคุณต้องการปรับเวิร์กโฟลว์การพัฒนา API ของคุณให้เหมาะสม คุณสามารถเริ่มต้นได้เลยวันนี้โดยคลิกที่ปุ่มด้านล่างเพื่อดาวน์โหลด Apidog! 👇

button

ไม่ว่าคุณจะเป็นนักพัฒนาที่มีประสบการณ์หรือเพิ่งเริ่มต้นการเดินทาง JavaScript ของคุณ การสำรวจเชิงลึกนี้จะช่วยให้คุณมีความรู้และเทคนิคในการใช้ประโยชน์จากศักยภาพทั้งหมดของ Fetch ภายในโปรเจกต์ Node.js ของคุณ

Node.js Fetch คืออะไร

Node.js Fetch API เป็นกลไกมาตรฐานสำหรับการเริ่มต้นคำขอ HTTP แบบอะซิงโครนัสจากภายในแอปพลิเคชัน Node.js มันมีวิธีการตามสัญญา โดยนำเสนอไวยากรณ์ที่สะอาดและกระชับกว่าเมื่อเทียบกับวิธีการ XMLHttpRequest (XHR) แบบเก่า

Fetch ช่วยให้นักพัฒนาสามารถดึงข้อมูลจากเว็บเซิร์ฟเวอร์ต่างๆ โต้ตอบกับ APIs และจัดการการไหลของข้อมูลภายในโปรแกรม Node.js ของพวกเขา มันทำให้การจัดการข้อผิดพลาดง่ายขึ้นและปรับปรุงการดำเนินงานแบบอะซิงโครนัส ทำให้เกิดวิธีการสื่อสาร HTTP ที่ทันสมัยและมีประสิทธิภาพมากขึ้นในสภาพแวดล้อม Node.js

ประโยชน์ของการใช้ Node.js Fetch

1. ไวยากรณ์ที่สะอาดและกระชับกว่า:

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

2. การจัดการแบบอะซิงโครนัสตามสัญญา

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

3. การจัดการข้อผิดพลาดที่คล่องตัว

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

4. การแยกวิเคราะห์ JSON อัตโนมัติ:

Fetch มีความสามารถในการแยกวิเคราะห์การตอบสนอง JSON จากเซิร์ฟเวอร์โดยอัตโนมัติ
เพียงแค่ใช้เมธอด .json() กับอ็อบเจกต์การตอบสนอง คุณสามารถแปลงข้อมูล JSON ดิบเป็นอ็อบเจกต์ JavaScript ดั้งเดิมได้อย่างง่ายดาย โดยไม่จำเป็นต้องใช้ตรรกะการแยกวิเคราะห์ด้วยตนเอง

5. การอ่านและการบำรุงรักษาที่ดีขึ้น

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

6. การสนับสนุนในตัวสำหรับส่วนหัวและเนื้อหา

Fetch มีวิธีง่ายๆ ในการกำหนดส่วนหัวคำขอและเนื้อหาของเนื้อหา
คุณสามารถระบุส่วนหัวเช่น Content-Type หรือ Authorization และรวมข้อมูลสำหรับคำขอ POST หรือ PUT ภายในการเรียก Fetch API ได้อย่างง่ายดาย

7. ความยืดหยุ่นและการกำหนดค่า

Fetch มีความยืดหยุ่นสูง ช่วยให้คุณปรับแต่งลักษณะต่างๆ ของคำขอ HTTP ได้
คุณสามารถระบุเมธอดคำขอ (GET, POST, PUT ฯลฯ) กำหนดส่วนหัว รวมเนื้อหาของเนื้อหา และกำหนดค่าตัวเลือกเพิ่มเติม เช่น พฤติกรรมการแคชหรือการหมดเวลา

ข้อเสียที่อาจเกิดขึ้นกับ Node.js Fetch

1. การสนับสนุนเบราว์เซอร์ที่จำกัด (บรรเทาบางส่วน)

ในขณะที่ Fetch เป็น API มาตรฐานในปัจจุบัน การสนับสนุนเบราว์เซอร์ดั้งเดิมนั้นไม่ได้มีอยู่ทั่วไปเสมอไป
นี่อาจเป็นข้อกังวลหากคุณต้องการให้แน่ใจว่าเข้ากันได้กับเบราว์เซอร์รุ่นเก่า อย่างไรก็ตาม ด้วยการเพิ่มขึ้นของ polyfills (ไลบรารีโค้ดที่ให้ฟังก์ชันการทำงานสำหรับเบราว์เซอร์รุ่นเก่า) ข้อจำกัดนี้กำลังมีความสำคัญน้อยลง

2. ไม่ใช่การแทนที่สำหรับทุกสถานการณ์

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

3. ลักษณะ Single-Threaded ของ Node.js

สิ่งสำคัญคือต้องจำไว้ว่า Node.js นั้นเป็นแบบ single-threaded
ในขณะที่ Fetch จัดการการดำเนินงานแบบอะซิงโครนัสอย่างมีประสิทธิภาพ หากแอปพลิเคชันของคุณเกี่ยวข้องกับคำขอ HTTP พร้อมกันจำนวนมากที่ต้องใช้การประมวลผลจำนวนมาก อาจยังคงนำไปสู่ปัญหาคอขวดด้านประสิทธิภาพได้

ตัวอย่างโค้ดที่แสดง Node.js Fetch API

1. คำขอ GET พื้นฐาน

const fetch = require('node-fetch');

const url = 'https://api.example.com/data';

fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log('Retrieved data:', data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

คำอธิบายโค้ด:

โค้ดดึงข้อมูลจาก URL ที่ระบุโดยใช้คำขอ GET จากนั้นแยกวิเคราะห์การตอบสนอง JSON และบันทึกข้อมูลที่ดึงมา หากพบข้อผิดพลาด จะบันทึกข้อความแสดงข้อผิดพลาด

2. คำขอ POST พร้อมข้อมูล JSON

const fetch = require('node-fetch');

const url = 'https://api.example.com/data';
const data = { name: 'John Doe', age: 30 };

fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: { 'Content-Type': 'application/json' }
})
  .then(response => response.json())
  .then(data => {
    console.log('Data posted successfully:', data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });

คำอธิบายโค้ด:

ตัวอย่างโค้ดแสดงการส่งคำขอ POST พร้อมข้อมูล JSON มันแปลงอ็อบเจกต์ข้อมูลเป็นสตริงและตั้งค่าส่วนหัวที่เหมาะสมก่อนทำการร้องขอ

3. การจัดการข้อผิดพลาดด้วยรหัสสถานะ

const fetch = require('node-fetch');

const url = 'https://api.example.com/data/invalid';

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error(`Error: ${response.status} - ${response.statusText}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('Retrieved data:', data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

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

4. การดึงเนื้อหาข้อความ

const fetch = require('node-fetch');

const url = 'https://www.example.com/about';

fetch(url)
  .then(response => response.text())
  .then(text => {
    console.log('Retrieved HTML content:', text.slice(0, 100)); // Limit output for brevity
  })
  .catch(error => {
    console.error('Error fetching content:', error);
  });

ตัวอย่างนี้ดึงเนื้อหาของเว็บไซต์และแสดงการใช้เมธอด .text() เพื่อดึงการตอบสนองเป็นข้อความธรรมดา

Apidog - ข้ามขั้นตอนการเขียนโค้ดโดยการสร้างโค้ด

การเขียนโค้ด APIs ของคุณเองนั้นไม่มีประสิทธิภาพอีกต่อไป โดยเฉพาะอย่างยิ่งกับจำนวนองค์ประกอบอื่นๆ ที่คุณต้องตรวจสอบให้แน่ใจว่าทำงานได้ ดังนั้น คุณควรพิจารณาใช้ Apidog ซึ่งเป็นแพลตฟอร์มการพัฒนา API แบบ all-in-one ที่ให้ผู้ใช้มีสภาพแวดล้อมในการสร้าง ทดสอบ จำลอง และจัดทำเอกสาร APIs

button

สร้างโค้ดไคลเอนต์ Fetch ด้วย Apidog

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

ขั้นแรก ให้ค้นหาปุ่ม </> ที่อยู่รอบๆ ด้านบนขวาของหน้าต่าง Apidog จากนั้น กด Generate Client Code เพื่อดำเนินการสร้างโค้ด

ถัดไป คุณจะได้รับการต้อนรับด้วยหน้าต่างป๊อปอัป เลือก JavaScript จากนั้นส่วนหัว Fetch บนหน้าจอของคุณ คุณควรมีโค้ดหลายบรรทัดพร้อมให้คุณคัดลอกและวางลงใน IDE (Integrated Development Environment) ของคุณ

การทดสอบ API Endpoints โดยใช้ Apidog

หลังจากที่คุณทำการนำเข้าโค้ดไคลเอนต์และขั้นตอนการออกแบบ API เสร็จสิ้น คุณควรดำเนินการทดสอบ API ของคุณ

หากต้องการกำหนดเป้าหมาย API endpoint ที่ถูกต้อง ก่อนอื่นคุณต้องแทรก API endpoint ที่เกี่ยวข้องที่คุณต้องการทดสอบ เมื่อคุณรวม API URL ที่ต้องการแล้ว ให้รวมพารามิเตอร์ที่คุณต้องการใช้สำหรับ endpoint (ถ้าเกี่ยวข้อง)

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

บทสรุป

Node.js Fetch API ได้กลายเป็นเครื่องมือที่ทรงพลังและหลากหลายสำหรับการสร้างแอปพลิเคชัน Node.js สมัยใหม่ ด้วยการใช้ Promises และนำเสนอไวยากรณ์ที่สะอาดกว่า Fetch ทำให้คำขอ HTTP แบบอะซิงโครนัสง่ายขึ้น ปรับปรุงการจัดการข้อผิดพลาด และปรับปรุงการอ่านโค้ด

ไม่ว่าคุณจะเป็นนักพัฒนาที่มีประสบการณ์หรือเริ่มต้นการเดินทาง JavaScript ของคุณ คู่มือที่ครอบคลุมนี้ได้มอบความรู้และตัวอย่างการปฏิบัติจริงให้กับคุณเพื่อใช้ประโยชน์จากศักยภาพทั้งหมดของ Fetch ภายในโปรเจกต์ Node.js ของคุณ

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

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