Xử lý lỗi khi sử dụng Fetch API

Khi làm việc với Fetch API, việc xử lý lỗi trở nên quan trọng để đảm bảo ứng dụng web hoạt động một cách mượt mà và ổn định. Fetch API cho phép gửi yêu cầu đến một nguồn tài nguyên mạng từ xa. Tuy nhiên, khi thực hiện một cuộc gọi mạng từ xa, trang web của bạn có thể gặp phải nhiều loại lỗi tiềm ẩn.

Dự Đoán Các Lỗi Mạng Có Thể Xảy Ra

Ví Dụ Về Lỗi Người Dùng

Người dùng tải lên một tập tin hình ảnh (như JPEG) thay vì tập tin video.
Người dùng bắt đầu tải lên tập tin video sai. Sau đó, giữa quá trình tải, người dùng chỉ định tập tin video đúng để tải lên.
Người dùng vô tình nhấp vào "Hủy tải lên" trong khi video đang được tải lên.

Ví Dụ Về Thay Đổi Môi Trường

Kết nối internet bị mất trong khi video đang được tải lên.
Trình duyệt khởi động lại trong khi video đang được tải lên.
Các máy chủ cho trang web chia sẻ video khởi động lại trong khi video đang được tải lên.

Ví Dụ Về Lỗi Trang Web Chia Sẻ Video

Trang web chia sẻ video không thể xử lý tên tập tin có khoảng trống. Thay vì "My Travels.mp4", trang web yêu cầu tên như "My_Travels.mp4" hoặc "MyTravels.mp4".

Xử Lý Lỗi Với Fetch API

Khi Trình Duyệt Không Thể Xử Lý Lỗi

Đoạn mã dưới đây sử dụng khối lệnh try/catch để bắt lỗi nếu có bất kỳ lỗi nào xảy ra trong khối try. Ví dụ, nếu Fetch API không thể lấy tài nguyên được chỉ định, một lỗi sẽ được ném ra. Trong khối catch như thế này, hãy cung cấp một trải nghiệm người dùng có ý nghĩa.

try {
  const response = await fetch('https://website');
} catch (error) {
  // TypeError: Failed to fetch
  console.log('There was an error', error);
}

Khi Mã Trạng Thái Mạng Biểu Thị Một Lỗi

try {
  const response = await fetch('https://httpbin.org/status/429');
  if (!response.ok) {
    throw new Error(`${response.status} ${response.statusText}`);
  }
  // sử dụng response ở đây nếu không có lỗi
  doSomethingWith(response);
} catch (error) {
  console.log(error);
}

Khi Có Lỗi Trong Việc Phân Tích Phản Hồi Mạng

let json;

try {
  const response = await fetch('https://httpbin.org/html');
  json = await response.json();
} catch (error) {
  if (error instanceof SyntaxError) {
    // Lỗi cú pháp không mong đợi
    console.log('There was a SyntaxError', error);
  } else {
    console.log('There was an error', error);
  }
}

if (json) {
  console.log('Use the JSON here!', json);
}

Khi Yêu Cầu Mạng Phải Bị Hủy Trước Khi Hoàn Tất

const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => controller.abort(), 500);

try {
  const url = 'https://httpbin.org/delay/1';
  const response = await fetch(url, { signal });
  console.log(response);
} catch (error) {
  // DOMException: The user aborted a request.
  console.log('Error: ', error)


}

Kết Luận

Để xử lý lỗi hiệu quả, bạn cần định nghĩa các phần có thể gặp lỗi. Đối với mỗi tình huống, hãy đảm bảo bạn có một phương pháp phụ trợ phù hợp cho người dùng. Hãy đặt ra các câu hỏi như:

• Khi máy chủ mục tiêu bị tắt thì điều gì xảy ra?
• Khi Fetch nhận phản hồi không mong đợi thì sao?
• Khi kết nối internet của người dùng thất bại thì điều gì xảy ra?

Dựa vào độ phức tạp của trang web của bạn, bạn có thể vẽ ra một sơ đồ dòng hoạt động mô tả chức năng và giao diện người dùng cho các tình huống khác nhau.