Error Handling khi gọi API trong Vue.js

Khi làm việc với API, có thể xảy ra nhiều lỗi như:

• 404 - Không tìm thấy dữ liệu
• 500 - Lỗi server
• Lỗi kết nối mạng

Việc xử lý lỗi giúp:

• Hiển thị thông báo lỗi rõ ràng cho người dùng.
• Tránh crash ứng dụng khi API gặp vấn đề.
• Cung cấp giải pháp dự phòng khi API không hoạt động.

Trong bài này, chúng ta sẽ học:

• Cách bắt lỗi khi gọi API với try-catch và Axios.
• Hiển thị thông báo lỗi cho người dùng.
• Thực hành: Xây dựng hệ thống thông báo lỗi khi API bị lỗi.

Error Handling khi gọi API

1. Cách bắt lỗi khi gọi API (try-catch với Axios)

Dùng try-catch để bắt lỗi khi gửi request API.

Ví dụ: Bắt lỗi khi gọi API với Axios

import axios from 'axios';

export default {
  data() {
    return {
      products: [],
      loading: false,
      error: null, // Lưu lỗi khi gọi API
    };
  },
  methods: {
    async fetchProducts() {
      this.loading = true;
      this.error = null; // Reset lỗi trước khi gọi API
      try {
        let response = await axios.get('https://fakestoreapi.com/products');
        this.products = response.data;
      } catch (err) {
        console.error("Lỗi API:", err);
        this.error = "Không thể tải dữ liệu, vui lòng thử lại!";
      } finally {
        this.loading = false;
      }
    }
  }
};

Giải thích:

• try → Gửi request API và lấy dữ liệu.
• catch (err) → Nếu có lỗi, lưu vào error.
• finally → Đảm bảo loading = false dù có lỗi hay không.

2. Hiển thị thông báo lỗi cho người dùng

Dùng v-if="error" để hiển thị thông báo lỗi trong UI.

Ví dụ: Hiển thị lỗi khi API bị lỗi

<template>
  <div>
    <button @click="fetchProducts">Tải sản phẩm</button>

    <!-- Hiển thị thông báo lỗi -->
    <p v-if="error" class="error">{{ error }}</p>

    <!-- Hiển thị loading -->
    <p v-if="loading">Đang tải dữ liệu...</p>

    <!-- Hiển thị danh sách sản phẩm nếu không có lỗi -->
    <ul v-else-if="products.length">
      <li v-for="product in products" :key="product.id">{{ product.title }}</li>
    </ul>
  </div>
</template>

<style scoped>
.error {
  color: red;
  font-weight: bold;
}
</style>

Giải thích:

• Nếu có lỗi → Hiển thị "Không thể tải dữ liệu, vui lòng thử lại!"
• Nếu không có lỗi → Hiển thị danh sách sản phẩm.

Thực hành: Xây dựng hệ thống thông báo lỗi khi API bị lỗi

Bước 1: Tạo component ProductList.vue

<template>
  <div>
    <h2>Danh sách sản phẩm</h2>
    <button @click="fetchProducts">Tải sản phẩm</button>

    <!-- Hiển thị lỗi -->
    <p v-if="error" class="error">{{ error }}</p>

    <!-- Hiển thị loading -->
    <p v-if="loading">Đang tải dữ liệu...</p>

    <!-- Hiển thị danh sách sản phẩm -->
    <ul v-else-if="products.length">
      <li v-for="product in products" :key="product.id">
        <h3>{{ product.title }}</h3>
        <p>Giá: ${{ product.price }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      products: [],
      loading: false,
      error: null,
    };
  },
  methods: {
    async fetchProducts() {
      this.loading = true;
      this.error = null;
      try {
        let response = await axios.get('https://fakeapi.com/products'); // API lỗi
        this.products = response.data;
      } catch (err) {
        this.error = "Không thể tải dữ liệu! Vui lòng kiểm tra kết nối.";
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
.error {
  color: red;
  font-weight: bold;
}
</style>

Test lỗi: Thay API thành https://fakeapi.com/products để tạo lỗi 404.

Bước 2: Hiển thị lỗi chi tiết hơn

Hiển thị lỗi theo mã HTTP (404, 500):

async fetchProducts() {
  this.loading = true;
  this.error = null;
  try {
    let response = await axios.get('https://fakeapi.com/products');
    this.products = response.data;
  } catch (err) {
    if (err.response) {
      // Lỗi từ server (404, 500)
      this.error = `Lỗi ${err.response.status}: ${err.response.statusText}`;
    } else if (err.request) {
      // Lỗi kết nối
      this.error = "Không thể kết nối đến máy chủ!";
    } else {
      // Lỗi khác
      this.error = "Đã có lỗi xảy ra!";
    }
  } finally {
    this.loading = false;
  }
}

Giải thích:

• 404 - Không tìm thấy dữ liệu → "Lỗi 404: Not Found"
• 500 - Lỗi server → "Lỗi 500: Internal Server Error"
• Lỗi kết nối → "Không thể kết nối đến máy chủ!"

Kết luận

• Luôn sử dụng try-catch để xử lý lỗi khi gọi API.
• Hiển thị lỗi rõ ràng cho người dùng bằng error message.
• Kiểm tra lỗi theo mã HTTP (404, 500) để cung cấp thông tin chính xác hơn.
• Thực hành giúp bạn nắm vững cách xử lý lỗi khi làm việc với API trong Vue.js.