Giới Thiệu

Chào các bạn! Trong quá trình học JavaScript, không ít lần bạn sẽ cảm thấy bối rối khi phải kết hợp giữa thiết kế giao diện và xử lý dữ liệu từ phía Back-End. Hôm nay, chúng ta sẽ cùng tìm hiểu về phương thức fetch() - một công cụ mạnh mẽ giúp lấy dữ liệu từ Back-End về một cách dễ dàng.

Kiến Thức Cơ Bản

Để hiểu rõ về fetch(), trước tiên, chúng ta cần nắm vững một số khái niệm và thuật ngữ liên quan đến nó, bao gồm:

1. API
2. JSON
3. Promise

1. API là gì?

API (Application Programming Interface) là giao diện lập trình ứng dụng, cho phép hai hệ thống khác nhau kết nối và trao đổi thông tin. Cách đơn giản nhất để hình dung là như việc bạn giao tiếp với một người bạn quốc tế bằng ngôn ngữ chung. API thường được cung cấp dưới dạng một URL trỏ về một dịch vụ Back-End.

2. JSON

JSON (JavaScript Object Notation) là định dạng dữ liệu được sử dụng rộng rãi để lưu trữ và truyền tải thông tin. Nó cho phép bạn mô tả dữ liệu dưới dạng chuỗi, bao gồm number, boolean, null và object. JavaScript cung cấp hai phương thức chính để chuyển đổi giữa JSON và các kiểu dữ liệu: JSON.parse() và JSON.stringify().

3. Promise

Promise là một đối tượng cho phép xử lý các tác vụ bất đồng bộ trong JavaScript mà không gây ra tình trạng Callback Hell. Một Promise có ba trạng thái: Pending, Fulfilled, và Rejected. Bạn có thể sử dụng .then() để lấy giá trị khi Promise được hoàn thành và .catch() để xử lý lỗi.

Tổng Quan về Fetch

fetch() là một Web API dùng để gọi một API từ phía Back-End và lấy dữ liệu cần thiết để hiển thị trên giao diện.

Quy Trình Hoạt Động của Fetch

1. Backend cung cấp API cho Front-End.
2. Front-End sử dụng fetch() để lấy dữ liệu ở định dạng JSON hoặc XML.
3. Dữ liệu được biến đổi thành các kiểu dữ liệu trong JavaScript.
4. Sử dụng các kiểu dữ liệu đã biến đổi.

Cú Pháp Sử Dụng Fetch

fetch(url, init);

• url: Địa chỉ API từ Back-end.
• init: Tham số tùy chọn chứa các cài đặt cho yêu cầu.

Vì fetch() sử dụng Promise, bạn chỉ cần sử dụng .then() và .catch() để xử lý kết quả hoặc lỗi.

Làm Việc Với Fetch

Chúng ta sẽ thực hành với một API mẫu từ PokeAPI:

const API = "https://pokeapi.co/api/v2/pokemon/ditto";

fetch(API)
    .then((response) => response.json()) // Chuyển đổi dữ liệu JSON thành Object
    .then((data) => {
        console.log(data); // In ra dữ liệu đã nhận
    });

Tham Số Tùy Chọn Trong Fetch

Tham số init trong fetch() cho phép bạn thực hiện các thao tác như thêm, sửa hoặc xóa dữ liệu trên cơ sở dữ liệu mà không cần truy cập trực tiếp vào Back-End. Các thuộc tính phổ biến trong init bao gồm:

1. method: GET, POST, PUT, DELETE, PATCH.
2. headers: Thông tin về định dạng dữ liệu và xác thực.
3. body: Chứa dữ liệu cần gửi đi.

Ví Dụ Sử Dụng Fetch với Tham Số init

const url = 'https://pokeapi.co/api/v2/pokemon/ditto';
const init = {
    method: 'PATCH',
    headers: {
        'Content-Type': 'application/json',
        Authorization: 'TOKEN'
    },
    body: JSON.stringify({ creature: "poultry" }),
};

fetch(url, init)
    .then(response => response.json())
    .then(data => {
        console.log(data); 
    })
    .catch(error => {
        console.error("Error:", error);
    });

Kết Luận

Bây giờ bạn đã hiểu rõ về phương thức fetch() và tầm quan trọng của nó trong việc lấy dữ liệu từ Back-End. Đối với các Front-End Developer, việc làm quen và thành thạo với fetch() sẽ giúp bạn nâng cao kỹ năng và hiệu quả công việc. Nếu bài viết hữu ích, đừng quên để lại đánh giá và chia sẻ cho bạn bè nhé! Chúc bạn học tốt! :)
source: viblo