Xử lý lỗi khi fetch() API với try...catch

Khi gọi API bằng fetch(), có thể xảy ra lỗi như:

• API không phản hồi hoặc server bị lỗi.
• Request thất bại do lỗi mạng.
• Response từ server có mã lỗi như 404 (Not Found) hoặc 500 (Internal Server Error).

Trong bài học này, chúng ta sẽ tìm hiểu cách xử lý lỗi khi gọi API bằng try...catch, kiểm tra trạng thái phản hồi (response.ok, response.status) và viết mã để xử lý lỗi một cách hợp lý.

Xử lý lỗi khi fetch() API với try...catch

1. Xử lý lỗi với try...catch trong fetch()**

fetch() là một hàm bất đồng bộ, do đó chúng ta có thể sử dụng async/await cùng try...catch để xử lý lỗi một cách rõ ràng hơn.

Ví dụ:

async function fetchData() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    let data = await response.json();
    console.log("Dữ liệu nhận được:", data);
  } catch (error) {
    console.error("Lỗi khi gọi API:", error);
  }
}

fetchData();

Giải thích:

• try: Thử gửi request và lấy dữ liệu.
• await fetch(url): Đợi fetch() hoàn thành trước khi tiếp tục.
• catch(error): Bắt lỗi nếu fetch() thất bại (ví dụ: mất kết nối mạng).

2. Kiểm tra response status (response.ok, response.status)

Mặc dù fetch() không báo lỗi khi nhận được HTTP error (ví dụ: 404, 500), nhưng chúng ta có thể kiểm tra response.ok để xử lý.

Ví dụ kiểm tra response.ok:

async function fetchData() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/posts/9999"); // ID không tồn tại

    if (!response.ok) {
      throw new Error(`Lỗi HTTP: ${response.status}`); // Tạo lỗi nếu status không thành công
    }

    let data = await response.json();
    console.log("Dữ liệu nhận được:", data);
  } catch (error) {
    console.error("Lỗi khi gọi API:", error.message);
  }
}

fetchData();

Giải thích:

• response.ok: Trả về true nếu mã trạng thái HTTP 200–299, ngược lại là false.
• Nếu response.ok là false, ta throw new Error() để xử lý lỗi.
• Bắt lỗi với catch() và hiển thị thông báo lỗi.

3. Ví dụ: Xử lý lỗi khi API không phản hồi hoặc gặp lỗi

Nếu API bị lỗi hoặc đường dẫn không tồn tại, chúng ta có thể hiển thị thông báo cho người dùng.

Ví dụ:

async function fetchData() {
  try {
    let response = await fetch("https://wrong-api-url.com/data"); // API sai

    if (!response.ok) {
      throw new Error(`Không thể lấy dữ liệu: ${response.status}`);
    }

    let data = await response.json();
    console.log("Dữ liệu nhận được:", data);
  } catch (error) {
    console.error("Lỗi khi gọi API:", error.message);
    document.body.innerHTML = `<h2 style="color: red;">Lỗi khi tải dữ liệu. Vui lòng thử lại!</h2>`;
  }
}

fetchData();

Kết quả:

• Nếu API sai, sẽ hiển thị lỗi trên giao diện: "Lỗi khi tải dữ liệu. Vui lòng thử lại!"
• Nếu API đúng, dữ liệu sẽ được hiển thị trong console.

Kết luận

Những điều quan trọng khi xử lý lỗi trong fetch() API:

1. Dùng try...catch để bắt lỗi trong async/await.
2. Kiểm tra response.ok trước khi xử lý dữ liệu.
3. Hiển thị thông báo lỗi để cải thiện trải nghiệm người dùng.