ทำความเข้าใจและใช้งาน Asynchronous Programming ใน JavaScript

Apr 12 2023

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

สารบัญ

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

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

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

ข้อดีของการเขียนโปรแกรมแบบอะซิงโครนัส

การเขียนโปรแกรมแบบอะซิงโครนัสใน JavaScript มีข้อดีหลายประการ ได้แก่:

ปรับปรุงประสิทธิภาพ

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

ประสบการณ์การใช้งานที่ดีขึ้น

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

ความสามารถในการปรับขนาดที่เพิ่มขึ้น

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

ฟังก์ชั่นการโทรกลับ

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

นี่คือตัวอย่างฟังก์ชันการโทรกลับใน JavaScript:

function fetchData(callback) {
  setTimeout(() => {
    callback('Data fetched successfully!');
  }, 2000);
}

fetchData((data) => {
  console.log(data);
});

สัญญา

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

นี่คือตัวอย่างสัญญาใน JavaScript:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully!');
    }, 2000);
  });
}


fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log(error);
  });

ซิงค์/รอ

Async/await เป็นวิธีใหม่ในการนำการเขียนโปรแกรมแบบอะซิงโครนัสไปใช้ใน JavaScript Async/await ช่วยให้นักพัฒนาสามารถเขียนโค้ดอะซิงโครนัสที่มีลักษณะและการทำงานเหมือนโค้ดซิงโครนัส ทำให้อ่านและทำความเข้าใจได้ง่ายขึ้น

นี่คือตัวอย่างของ async/await ใน JavaScript:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully!');
    }, 2000);
  });
}

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

getData();

ฟังก์ชันgetDataถูกทำเครื่องหมายเป็นasyncซึ่งหมายความว่าสามารถใช้awaitคำสำคัญเพื่อรอให้คำสัญญาเสร็จสิ้น บล็อกtryและcatchใช้เพื่อจัดการกับข้อผิดพลาดที่อาจเกิดขึ้นระหว่างการดำเนินการของงาน

การจัดการข้อผิดพลาดในการเขียนโปรแกรมแบบอะซิงโครนัส

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

ในฟังก์ชันการเรียกกลับ โดยทั่วไปข้อผิดพลาดจะถูกส่งผ่านเป็นอาร์กิวเมนต์แรกไปยังฟังก์ชันการเรียกกลับ ในสัญญา ข้อผิดพลาดมักจะจัดการโดยใช้catchเมธอด ใน async/await ข้อผิดพลาดมักจะถูกจัดการโดยใช้ a tryและcatchblock

แนวทางปฏิบัติที่ดีที่สุดสำหรับการเขียนโปรแกรมแบบอะซิงโครนัส

แนวทางปฏิบัติที่ดีที่สุดสำหรับการเขียนโปรแกรมแบบอะซิงโครนัสใน JavaScript มีดังนี้

ใช้สัญญาหรือ async/await แทนฟังก์ชันการโทรกลับทุกครั้งที่ทำได้
จัดการข้อผิดพลาดอย่างเหมาะสมเสมอเพื่อหลีกเลี่ยงการรบกวนการไหลของแอปพลิเคชัน
หลีกเลี่ยงการบล็อกเธรดหลักด้วยงานที่ใช้เวลานาน
ใช้ไลบรารี เช่น Axios หรือ Fetch สำหรับคำขอ HTTP เนื่องจากสามารถจัดการงานแบบอะซิงโครนัสได้อย่างมีประสิทธิภาพ

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

จัดการข้อผิดพลาดไม่ถูกต้อง ซึ่งอาจนำไปสู่พฤติกรรมที่ไม่คาดคิดหรือข้อขัดข้อง
การใช้ callback มากเกินไป ซึ่งอาจนำไปสู่การ callback hell และทำให้โค้ดอ่านและบำรุงรักษาได้ยาก
การบล็อกเธรดหลักด้วยงานที่ใช้เวลานาน ซึ่งอาจทำให้แอปพลิเคชันค้างหรือไม่ตอบสนอง

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

ต่อไปนี้คือตัวอย่างการเขียนโปรแกรมแบบอะซิงโครนัสในแอปพลิเคชันในโลกแห่งความเป็นจริง:

async function uploadFile(file) {
  try {
    const response = await fetch('https://example.com/upload', {
      method: 'POST',
      body: file,
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

const fileInput = document.querySelector('#file-input');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  uploadFile(file);
});

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

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

บทสรุป

การเขียนโปรแกรมแบบอะซิงโครนัสเป็นแนวคิดพื้นฐานใน JavaScript และเป็นสิ่งสำคัญสำหรับการสร้างเว็บแอปพลิเคชันสมัยใหม่ที่รวดเร็วและตอบสนอง มีหลายวิธีในการใช้การเขียนโปรแกรมแบบอะซิงโครนัสใน JavaScript รวมถึงฟังก์ชันการเรียกกลับ สัญญา และ async/await แต่ละแนวทางมีข้อดีข้อเสีย และนักพัฒนาควรเลือกแนวทางที่เหมาะกับกรณีการใช้งานของตนมากที่สุด

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