การดักจับข้อผิดพลาด AJAX แบบสมบูรณ์ใน JavaScript

Promise ที่ส่งคืนโดย fetch จะสำเร็จด้วยข้อผิดพลาดก็ต่อเมื่อเกิด ข้อผิดพลาดเครือข่ายเท่านั้น หากเซิร์ฟเวอร์ส่งกลับการตอบสนอง ที่มีสถานะ 404 หรือ 500 Promise จะสำเร็จด้วยผลลัพธ์ แต่สถานะ ok จะ ถูกตั้งค่าเป็น false

เรามาดักจับข้อผิดพลาดทั้งสองประเภท:

javascriptbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html')
  .then(
    response => {
      if (response.ok) {
        return response.text();
      } else {
        console.log('สถานะการตอบสนองไม่ดี');
        return '';
      }
    },
  ).then(
    text => {
      console.log(text);
    }
  ).catch(
    error => {
      console.log(error);
    }
  );
});

มาทำให้ข้อผิดพลาดที่เกี่ยวข้อง กับสถานะ HTTP ที่ไม่ดี สามารถ ถูกดักจับโดยบล็อก catch ได้ โดยการส่งต่อมันไป ผ่าน throw:

javascriptbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html')
  .then(
    response => {
      if (response.ok) {
        return response.text();
      } else {
        throw new Error('สถานะการตอบสนองไม่ดี');
      }
    },
  ).then(
    text => {
      console.log(text);
    }
  ).catch(
    error => {
      console.log(error);
    }
  );
});