0Pricing
Vue Academy · บทเรียน

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

การใช้ try/catch ในคอมโพสิเบิลแบบอะซิงโครนัส การเปิดเผยสถานะข้อผิดพลาด และตรรกะการลองใหม่ใน useFetch

การจัดการข้อผิดพลาดแบบอะซิงโครนัสในคอมโพสิเบิล เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

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

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

การเปิดเผยรีฟข้อผิดพลาด

ส่งคืนรีฟ error ควบคู่กับข้อมูลและสถานะกำลังโหลด ผู้เรียกใช้จะเฝ้าดูรีฟนี้เพื่อแสดงข้อความ

function useApi() {
  const data = ref(null);
  const error = ref(null);
  return { data, error };
}

การลองทำงานและดักจับในฟังก์ชันแบบอะซิงโครนัส

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

async function load() {
  try {
    data.value = await api.get();
  } catch (e) {
    error.value = e;
  }
}

การรีเซ็ตสถานะข้อผิดพลาด

ล้างข้อผิดพลาดเดิมเมื่อเริ่มการลองแต่ละครั้ง เพื่อไม่ให้ข้อความเก่าค้างอยู่หลังจากการลองใหม่สำเร็จ

async function load() {
  error.value = null;
  try { /* ... */ } catch (e) { error.value = e; }
}

รีฟ retryCount

เพื่อรองรับการลองใหม่ ให้ติดตามจำนวนครั้งด้วยรีฟ retryCount และเพิ่มค่าทุกครั้งที่ผู้ใช้ลองใหม่

const retryCount = ref(0);
function retry() {
  retryCount.value++;
  load();
}

ตรรกะการลองใหม่โดยอัตโนมัติ

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

async function load() {
  try {
    data.value = await api.get();
  } catch (e) {
    if (retryCount.value < 3) {
      retryCount.value++;
      return load();
    }
    error.value = e;
  }
}

การส่งคืนเอพีไอทั้งหมด

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

return { data, error, retry, retryCount };

การใช้ข้อผิดพลาด

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

<p v-if="error">Failed: {{ error.message }}</p>
<button v-if="error" @click="retry">Retry</button>

ข้อผิดพลาดระดับคอมโพสิเบิลเทียบกับตัวจัดการส่วนกลาง

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

เมื่อขอบเขตส่วนกลางเข้ามาทำงาน

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

การเลือกชั้นที่เหมาะสม

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

ตรวจสอบอย่างรวดเร็ว

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

สรุป

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

คำถามที่พบบ่อย

บทเรียน “การจัดการข้อผิดพลาดแบบอะซิงโครนัสในคอมโพสิเบิล” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การจัดการข้อผิดพลาดแบบอะซิงโครนัสในคอมโพสิเบิล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การจัดการข้อผิดพลาดแบบอะซิงโครนัสในคอมโพสิเบิล”

การใช้ try/catch ในคอมโพสิเบิลแบบอะซิงโครนัส การเปิดเผยสถานะข้อผิดพลาด และตรรกะการลองใหม่ใน useFetch คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

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

บทเรียน “การจัดการข้อผิดพลาดแบบอะซิงโครนัสในคอมโพสิเบิล” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ฮุกวงจรชีวิต onErrorCaptured
  2. คอมโพเนนต์ขอบเขตข้อผิดพลาด
  3. app.config.errorHandler สำหรับข้อผิดพลาดทั่วทั้งแอป
  4. การจัดการข้อผิดพลาดแบบอะซิงโครนัสในคอมโพสิเบิล
← กลับไปที่ Vue Academy