Best practice gọi API trong Vue.js 3

BBMCode đã đăng vào lúc 10:09:30 14/09/2024 | đọc khoảng 3 phút, có 498 từ

Với cấu trúc source code này, mình đã áp dụng dự án thực tế thấy khá hiệu quả.

Code dễ đọc, dễ bảo trì và tái sử dụng hơn. Cùng xem nhé!

 

src/
│
├── composables/
│   └── useFetchUsers.js        # Composable for fetching users
│
├── services/
│   └── apiService.js           # Centralized API service layer
│
├── components/
│   └── UsersComponent.vue      # Component using the API and composable
│
└── main.js                     # Main entry point for Vue app

1. apiService.js

file chứa các logic gọi API, tách biệt ra khỏi các components.

Lưu ý code bên dưới dùng axios, các bạn install vào nhé.

 

// src/services/apiService.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://example.bbmcode.com',
  timeout: 1000,
  headers: { 'Content-Type': 'application/json' },
});

// API methods
export default {
  getUsers() {
    return apiClient.get('/users');
  },
  getUser(id) {
    return apiClient.get(`/users/${id}`);
  },
};

 

2. useFetchUsers.js

composable chứa code logic, code gọi API, giúp bạn tái sử dụng nó trong nhiều component khác nhau.

// src/composables/useFetchUsers.js
import { ref } from 'vue';
import apiService from '../services/apiService';

export function useFetchUsers() {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);

  const fetchUsers = async () => {
    loading.value = true;
    try {
      const response = await apiService.getUsers();
      data.value = response.data;
    } catch (err) {
      error.value = 'Error fetching users';
    } finally {
      loading.value = false;
    }
  };

  return { data, loading, error, fetchUsers };
}

 

3. UsersComponent.vue

component useFetchUsers để gọi API, đồng thời xử lý các status như loading, error và hiển thị dữ liệu.

 

<!-- src/components/UsersComponent.vue -->
<template>
  <div>
    <button @click="fetchUsers">Load Users</button>
    <div v-if="loading">Loading...</div>
    <ul v-if="data">
      <li v-for="user in data" :key="user.id">{{ user.name }}</li>
    </ul>
    <div v-if="error">{{ error }}</div>
  </div>
</template>

<script>
import { onMounted } from 'vue';
import { useFetchUsers } from '../composables/useFetchUsers';

export default {
  setup() {
    const { data, loading, error, fetchUsers } = useFetchUsers();
    
    onMounted(() => fetchUsers()); // Fetch users when the component is mounted

    return { data, loading, error, fetchUsers };
  },
};
</script>

 

4. main.js

import UsersComponent vào file main hoặc nơi bạn cần dùng component.

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import UsersComponent from './components/UsersComponent.vue';

createApp(App)
  .component('UsersComponent', UsersComponent)
  .mount('#app');

 

Như vậy là ok rồi. Các bạn áp dụng thử có gì cứ để lại comment bên dưới nhé.