Next.js bài 5: Dùng Axios để gọi API và cập nhật dữ liệu

Truy cập API là một phần không thể thiếu của bất kỳ ứng dụng web nào. Axios là một thư viện HTTP client của JavaScript. Axios rất phổ biến trong việc giúp chúng ta tương tác với các API và phần server của ứng dụng. Trong bài viết này, chúng ta sẽ tạo các yêu cầu API bằng Axios trong Next.js cho các hoạt động CRUD (Create, Read, Update, Delete).

Bài trước: Next.js bài 4: Tạo một thành phần bố cục (layout) trong Next.js với Bootstrap 5

Chuẩn bị

Trước khi bắt đầu, chắc chắn rằng bạn đã cài đặt Next.js và Axios bằng cách chạy lệnh sau trong thư mục gốc của dự án next.js của bạn:

npm install axios

Chúng ta sẽ sử dụng một API mẫu được lưu trữ trên một server giả định để thực hành. API này cung cấp các yêu cầu RESTful cho CRUD logs bao gồm: lấy tất cả logs, lấy log theo ID, tạo log mới, cập nhật log hiện có và xóa log.

Lấy tất cả Logs

Bắt đầu bằng cách lấy tất cả log từ API. Chúng ta sẽ sử dụng một function chung đê gửi requests tới server cho phép trả về tất cả các logs hiện có:

import axios from 'axios';

const apiUrl = `https://fakeapi.com/logs`;

const getAllLogs = async () => {
  const res = await axios.get(apiUrl);
  return res.data;
};

export default getAllLogs;

Ở đây, chúng ta đã tạo một apiUrl hằng số cho endpoint của API. Sau đó, function getAllLogs sử dụng axios.get để gửi một yêu cầu GET đến địa chỉ URL của chúng ta và trả về tất cả các log có sẵn.

Lấy Logs theo ID

Tiếp theo, chúng ta sẽ tạo một function cho phép lấy một log cụ thể bằng cách truyền một ID vào Endpoint của API :

import axios from 'axios';

const apiUrl = `https://fakeapi.com/logs`;

const getLogById = async (id) => {
  const res = await axios.get(`${apiUrl}/${id}`);
  return res.data;
};

export default getLogById;

Ở đây, chúng ta sử dụng cú pháp ${apiUrl}/${id} để tạo URL cho endpoint. Sau đó, chúng ta sử dụng axios.get để gửi yêu cầu GET đến API của chúng ta và trả về log tương ứng với ID được cung cấp.

Tạo một Log mới

Chúng ta cũng có thể tạo một log mới bằng cách sử dụng function createLog. Hàm này gửi một POST request đến Endpoint API của chúng ta và trả về một logs mới sau khi được tạo thành công:

import axios from 'axios';

const apiUrl = `https://fakeapi.com/logs`;

const createLog = async (log) => {
  const res = await axios.post(apiUrl, log);
  return res.data;
};

export default createLog;

Ở đây, chúng ta sử dụng axios.post để gửi yêu cầu POST đến API để tạo một log mới. Chúng ta truyền vào đối tượng log đại diện cho log mới cần được tạo.

Cập nhật một Log hiện có

Chúng ta cũng có thể sử dụng function updateLog để cập nhật một log hiện có bằng cách gửi một PUT request đến API. Hàm này trả về log đã được cập nhật thành công:

import axios from 'axios';

const apiUrl = `https://fakeapi.com/logs`;

const updateLog = async (id, log) => {
  const res = await axios.put(`${apiUrl}/${id}`, log);
  return res.data;
};

export default updateLog;

Ở đây, chúng ta sử dụng axios.put để gửi một yêu cầu PUT đến API. Chúng ta cung cấp đối tượng log mới làm tham số.

Xóa một Log

Cuối cùng, chúng ta cũng có thể xóa một log sử dụng function deleteLog. Hàm này gửi một DELETE request đến API và trả về thông tin về việc xóa thành công của log:

import axios from 'axios';

const apiUrl = `https://fakeapi.com/logs`;

const deleteLog = async (id) => {
  const res = await axios.delete(`${apiUrl}/${id}`);
  return res.data;
};

export default deleteLog;

Ở đây, chúng ta sử dụng axios.delete để gửi yêu cầu DELETE đến API, trong khi chúng ta cung cấp ID của log được xóa.

Kết luận

Trong bài viết này, chúng ta đã tìm hiểu cách sử dụng Axios để tạo các yêu cầu API cho CRUD (Create, Read, Update, Delete). Các function này cho phép chúng ta làm việc với API của backend.

Xem bài tiếp theo để học cách gọi API và hiển thị thông tin lên màn hình giao diện: Next.js bài 6: Tạo ứng dụng quản lý đầu việc với Axios và React-bootstrap.