คุณเคยประสบกับความหงุดหงิดจากการหมดเวลาของคำขอ API ซึ่งส่งผลให้เกิดข้อผิดพลาดเช่น "request failed with status code 408" หรือ "network error" หรือไม่?

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

อย่างไรก็ตาม การเลือกค่า timeout ที่เหมาะสมและการจัดการ timeout อย่างเหมาะสมอาจเป็นเรื่องท้าทาย นี่คือที่ที่ Apidog ซึ่งเป็นแพลตฟอร์มทดสอบและแก้ไขข้อบกพร่อง API สามารถทดสอบและแก้ไขข้อบกพร่องคำขอ axios ของคุณด้วย timeout ได้

Axios Timeout คืออะไรและทำไมจึงสำคัญ

ก่อนที่เราจะเจาะลึกรายละเอียดเกี่ยวกับวิธีการจัดการ axios timeout มาทำความเข้าใจกันก่อนว่ามันคืออะไรและทำไมจึงสำคัญ

Axios timeout คือระยะเวลาสูงสุดที่ axios จะรอการตอบสนองจากเซิร์ฟเวอร์ก่อนที่จะยกเลิกคำขอและเกิดข้อผิดพลาด ค่า timeout เริ่มต้นใน axios คือ 0 ซึ่งหมายความว่าจะไม่มี timeout และ axios จะรอการตอบสนองอย่างไม่มีกำหนด

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

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

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

แต่คุณจะตั้งค่า timeout ใน axios ได้อย่างไร? และคุณจะจัดการข้อผิดพลาดเมื่อเกิดขึ้นได้อย่างไร? นั่นคือสิ่งที่เราจะเห็นในส่วนถัดไป

วิธีการตั้งค่าตัวเลือก Timeout ใน Axios

การตั้งค่าตัวเลือก timeout ใน axios นั้นง่ายและตรงไปตรงมามาก คุณสามารถระบุค่า timeout เป็นมิลลิวินาทีเป็นคุณสมบัติของอ็อบเจกต์ config ที่คุณส่งไปยังเมธอดคำขอ axios เช่น axios.get, axios.post, axios.put เป็นต้น

ตัวอย่างเช่น หากคุณต้องการตั้งค่า timeout เป็น 5 วินาที (5000 มิลลิวินาที) สำหรับคำขอ GET ไปยังปลายทาง API บางอย่าง คุณสามารถเขียนได้ดังนี้:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // handle success
  })
  .catch(error => {
    // handle error
  });

อีกทางเลือกหนึ่ง คุณยังสามารถตั้งค่า timeout ทั่วโลกสำหรับคำขอ axios ทั้งหมดได้ โดยใช้อ็อบเจกต์ axios.defaults ตัวอย่างเช่น หากคุณต้องการตั้งค่า timeout เป็น 5 วินาทีสำหรับคำขอ axios ทั้งหมด คุณสามารถเขียนได้ดังนี้:

axios.defaults.timeout = 5000;

คุณยังสามารถสร้างอินสแตนซ์ axios ด้วยค่า timeout ที่กำหนดเอง และใช้สำหรับคำขอเฉพาะได้ ตัวอย่างเช่น หากคุณต้องการสร้างอินสแตนซ์ axios ด้วยค่า timeout 10 วินาที และใช้สำหรับคำขอบางรายการ คุณสามารถเขียนได้ดังนี้:

const instance = axios.create({timeout: 10000});

instance.get('/api/products')
  .then(response => {
    // handle success
  })
  .catch(error => {
    // handle error
  });

ดังที่คุณเห็น การตั้งค่าตัวเลือก timeout ใน axios นั้นง่ายและยืดหยุ่นมาก คุณสามารถปรับแต่งได้สำหรับคำขอต่างๆ ขึ้นอยู่กับความต้องการและความชอบของคุณ

แต่คุณจะเลือกค่า timeout ที่เหมาะสมสำหรับคำขอของคุณได้อย่างไร? คุณควรรอการตอบสนองนานแค่ไหนก่อนที่จะยอมแพ้? ไม่มีคำตอบที่ชัดเจนสำหรับคำถามนี้ เนื่องจากขึ้นอยู่กับปัจจัยหลายประการ เช่น:

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

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

วิธีการจับและจัดการข้อผิดพลาด Timeout ใน Axios

เมื่อถึงค่า timeout และคำขอถูกยกเลิก axios จะเกิดข้อผิดพลาด ซึ่งคุณสามารถจับและจัดการในโค้ดของคุณได้ มีหลายวิธีในการจับและจัดการข้อผิดพลาด ขึ้นอยู่กับวิธีการเขียนคำขอ axios ของคุณ เช่น การใช้ try/catch, promises หรือ async/await

การใช้ try/catch

หากคุณใช้ try/catch เพื่อเขียนคำขอ axios คุณสามารถจับข้อผิดพลาดในบล็อก catch และจัดการตามนั้น ตัวอย่างเช่น หากคุณใช้บล็อก try/catch เพื่อทำการขอ GET ไปยังปลายทาง API บางอย่าง โดยมีค่า timeout 5 วินาที คุณสามารถเขียนได้ดังนี้:

try {
  const response = await axios.get('/api/users', {timeout: 5000});
  // handle success
} catch (error) {
  // handle error
}

แต่คุณจะรู้ได้อย่างไรว่าข้อผิดพลาดนั้นเป็นข้อผิดพลาด timeout หรือข้อผิดพลาดประเภทอื่น? วิธีหนึ่งในการตรวจสอบคือการใช้คุณสมบัติ error.code ซึ่งจะถูกตั้งค่าเป็น ‘ECONNABORTED’ หากข้อผิดพลาดนั้นเป็นข้อผิดพลาด timeout ตัวอย่างเช่น คุณสามารถเขียนได้ดังนี้:

try {
  const response = await axios.get('/api/users', {timeout: 5000});
  // handle success
} catch (error) {
  // handle error
  if (error.code === 'ECONNABORTED') {
    // handle timeout error
    console.error('Request timed out');
    // do something else, such as showing an error message or a retry button
  } else {
    // handle other types of errors
    console.error(error.message);
    // do something else, such as logging the error or sending a notification
  }
}

ดังที่คุณเห็น การใช้ try/catch เป็นวิธีที่ง่ายและมีประสิทธิภาพในการจับและจัดการข้อผิดพลาด timeout ใน axios อย่างไรก็ตาม มันต้องใช้ไวยากรณ์ async/await ซึ่งอาจไม่รองรับโดยเบราว์เซอร์หรือสภาพแวดล้อมบางอย่าง หากคุณต้องการใช้วิธีที่เข้ากันได้และเป็นแบบดั้งเดิมมากขึ้นในการเขียนคำขอ axios ของคุณ คุณสามารถใช้ promises แทนได้

การใช้ promises

หากคุณใช้ promises เพื่อเขียนคำขอ axios คุณสามารถจับข้อผิดพลาดในเมธอด catch และจัดการตามนั้น ตัวอย่างเช่น หากคุณใช้ chain promise เพื่อทำการขอ GET ไปยังปลายทาง API บางอย่าง โดยมีค่า timeout 5 วินาที คุณสามารถเขียนได้ดังนี้:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // handle success
  })
  .catch(error => {
    // handle error
  });

ในการตรวจสอบว่าข้อผิดพลาดนั้นเป็นข้อผิดพลาด timeout หรือไม่ คุณสามารถใช้คุณสมบัติ error.code เดียวกันกับก่อนหน้านี้ และเปรียบเทียบกับ ‘ECONNABORTED’ ตัวอย่างเช่น คุณสามารถเขียนได้ดังนี้:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // handle success
  })
  .catch(error => {
    // handle error
    if (error.code === 'ECONNABORTED') {
      // handle timeout error
      console.error('Request timed out');
      // do something else, such as showing an error message or a retry button
    } else {
      // handle other types of errors
      console.error(error.message);
      // do something else, such as logging the error or sending a notification
    }
  });

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

การใช้ async/await

หากคุณใช้ async/await เพื่อเขียนคำขอ axios คุณสามารถจับข้อผิดพลาดในบล็อก try/catch และจัดการตามนั้น นี่คือวิธีเดียวกับที่เราเห็นก่อนหน้านี้ แต่ฉันจะทำซ้ำที่นี่เพื่อความสมบูรณ์ ตัวอย่างเช่น หากคุณใช้ฟังก์ชัน async เพื่อทำการขอ GET ไปยังปลายทาง API บางอย่าง โดยมีค่า timeout 5 วินาที คุณสามารถเขียนได้ดังนี้:

async function getUsers() {
  try {
    const response = await axios.get('/api/users', {timeout: 5000});
    // handle success
  } catch (error) {
    // handle error
    if (error.code === 'ECONNABORTED') {
      // handle timeout error
      console.error('Request timed out');
      // do something else, such as showing an error message or a retry button
    } else {
      // handle other types of errors
      console.error(error.message);
      // do something else, such as logging the error or sending a notification
    }
  }
}

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

นี่คือสามวิธีหลักในการจับและจัดการข้อผิดพลาด timeout ใน axios โดยใช้ try/catch, promises หรือ async/await คุณสามารถเลือกวิธีที่เหมาะสมกับความต้องการและสถานการณ์ของคุณได้ดีที่สุด และใช้ให้สอดคล้องกันตลอดทั้งโค้ดของคุณ

แต่คุณจะทดสอบและแก้ไขข้อบกพร่องคำขอ axios ของคุณด้วย timeout ได้อย่างไร?

วิธีการทดสอบและแก้ไขข้อบกพร่องคำขอ Axios ของคุณด้วย Timeout โดยใช้ Apidog

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

• เปิด Apidog และคลิกที่ปุ่ม “New Request” เพื่อสร้างคำขอใหม่

• คุณจะเห็นตัวแก้ไขคำขอ ซึ่งคุณสามารถป้อนรายละเอียดของคำขอของคุณ เช่น เมธอด URL ส่วนหัว เนื้อหา ฯลฯ

• คลิกที่ปุ่ม “Send” เพื่อส่งคำขอ

• คุณจะเห็นแผงการตอบสนอง ซึ่งคุณสามารถดูรายละเอียดของการตอบสนอง เช่น สถานะ ส่วนหัว เนื้อหา เวลา ฯลฯ

ด้วย Apidog คุณสามารถทดสอบและแก้ไขข้อบกพร่องคำขอ axios ของคุณด้วย timeout ได้อย่างง่ายดาย

บทสรุป

ในบล็อกโพสต์นี้ เราได้เรียนรู้วิธีจัดการ axios timeout อย่างมืออาชีพ โดยใช้แนวทางปฏิบัติที่ดีที่สุดและเครื่องมือที่มีอยู่ เราได้เห็นวิธีการ:

• ตั้งค่าตัวเลือก timeout ใน axios และปรับแต่งสำหรับคำขอต่างๆ
• จับและจัดการข้อผิดพลาด timeout ใน axios โดยใช้ try/catch, promises หรือ async/await
• ทดสอบและแก้ไขข้อบกพร่องคำขอ axios ของคุณด้วย timeout โดยใช้ Apidog ซึ่งเป็นแพลตฟอร์มแบบบูรณาการสำหรับการออกแบบ API, การแก้ไขข้อบกพร่อง, การพัฒนา, การจำลอง และการทดสอบ

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