Sử dụng Axios để gọi API trong Vue.js

Trong các ứng dụng web hiện đại, việc tương tác với API để lấy và gửi dữ liệu là một phần quan trọng. Vue.js không có thư viện HTTP tích hợp sẵn, nhưng chúng ta có thể sử dụng Axios – một thư viện phổ biến và mạnh mẽ để gọi API.

Bài học này sẽ giúp bạn hiểu cách sử dụng Axios để gửi các request HTTP (GET, POST, PUT, DELETE) trong Vue.js và thực hành tạo một ứng dụng đơn giản lấy dữ liệu từ API giả lập JSONPlaceholder.

Sử dụng Axios

1. Giới thiệu về Axios và cách cài đặt

Axios là một thư viện giúp gửi HTTP request dễ dàng hơn với các tính năng như:

• Hỗ trợ Promise-based API.
• Tích hợp dễ dàng với Vue.js.
• Xử lý request và response linh hoạt.

Cài đặt Axios

• Nếu sử dụng npm hoặc yarn:

  npm install axios
  

  hoặc

  yarn add axios
  

• Nếu sử dụng CDN (thêm vào <script> trong HTML):

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  

2. Cấu hình Axios trong Vue.js

Sau khi cài đặt, chúng ta có thể import Axios vào dự án:

import axios from 'axios';

Hoặc có thể cấu hình Axios toàn cục trong Vue.js bằng cách:

import axios from 'axios';
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// Cấu hình Axios toàn cục
axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
app.config.globalProperties.$axios = axios;

app.mount('#app');

Sau khi cấu hình, chúng ta có thể sử dụng this.$axios trong các component.

3. Gửi request GET, POST, PUT, DELETE với Axios

Axios hỗ trợ nhiều loại request HTTP như GET, POST, PUT, DELETE để làm việc với API.

Gửi request GET (Lấy dữ liệu)

Ví dụ lấy danh sách bài viết từ JSONPlaceholder API:

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data); // In dữ liệu nhận được
  })
  .catch(error => {
    console.error('Lỗi khi lấy dữ liệu:', error);
  });

Gửi request POST (Thêm dữ liệu mới)

Gửi một bài viết mới đến API:

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Bài viết mới',
    body: 'Nội dung bài viết...',
    userId: 1
  })
  .then(response => {
    console.log('Bài viết đã được tạo:', response.data);
  })
  .catch(error => {
    console.error('Lỗi khi gửi dữ liệu:', error);
  });

Gửi request PUT (Cập nhật dữ liệu)

Cập nhật bài viết có id = 1:

axios.put('https://jsonplaceholder.typicode.com/posts/1', {
    title: 'Tiêu đề mới',
    body: 'Nội dung mới...',
    userId: 1
  })
  .then(response => {
    console.log('Bài viết đã được cập nhật:', response.data);
  })
  .catch(error => {
    console.error('Lỗi khi cập nhật dữ liệu:', error);
  });

Gửi request DELETE (Xóa dữ liệu)

Xóa bài viết có id = 1:

axios.delete('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log('Bài viết đã bị xóa');
  })
  .catch(error => {
    console.error('Lỗi khi xóa dữ liệu:', error);
  });

Thực hành: Tạo ứng dụng Vue.js gọi API từ JSONPlaceholder

Chúng ta sẽ xây dựng một ứng dụng Vue đơn giản để hiển thị danh sách bài viết từ API.

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

Tạo một file PostList.vue và viết nội dung như sau:

<template>
  <div>
    <h2>Danh sách bài viết</h2>
    <button @click="fetchPosts">Tải bài viết</button>
    <ul v-if="posts.length">
      <li v-for="post in posts" :key="post.id">
        <h3>{{ post.title }}</h3>
        <p>{{ post.body }}</p>
      </li>
    </ul>
    <p v-else>Không có bài viết nào.</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
    };
  },
  methods: {
    async fetchPosts() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        this.posts = response.data;
      } catch (error) {
        console.error('Lỗi khi lấy bài viết:', error);
      }
    },
  },
};
</script>

<style scoped>
h2 {
  color: #42b983;
}
</style>

Bước 2: Thêm component vào App.vue

Mở App.vue và import component PostList.vue:

<template>
  <div id="app">
    <PostList />
  </div>
</template>

<script>
import PostList from './components/PostList.vue';

export default {
  components: {
    PostList,
  },
};
</script>

Kết luận

• Axios là một thư viện mạnh mẽ để làm việc với API trong Vue.js.
• Chúng ta có thể thực hiện GET, POST, PUT, DELETE để tương tác với API.
• Thực hành với JSONPlaceholder API giúp hiểu rõ cách gọi API thực tế.
• Khi làm việc với API, cần xử lý trạng thái tải (loading) và bắt lỗi (error handling) để cải thiện trải nghiệm người dùng.