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.
javascript
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
javascript
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
javascript
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
javascript
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.
