Bài viết được dịch và tổng hợp từ tin tức gốc. Bạn có thể đọc bài viết gốc bằng tiếng Anh tại đây.

Điểm tin nhanh:

• Fetch API là một phương thức hiện đại, linh hoạt để thực hiện các yêu cầu mạng trong trình duyệt.
• Async/await giúp viết code bất đồng bộ (asynchronous) trông giống như code tuần tự (synchronous), dễ đọc và quản lý hơn.
• Kết hợp Fetch API và async/await là cách tiếp cận hiệu quả để lấy dữ liệu trong React, đặc biệt cho các ứng dụng cần tương tác với API.

Fetching Data trong React: Hướng dẫn chi tiết với Fetch API và Async/Await cho người mới bắt đầu

Trong thế giới phát triển ứng dụng web hiện đại, việc lấy dữ liệu từ các API bên ngoài là một nhiệm vụ cốt lõi. React, với hệ sinh thái phong phú của mình, cung cấp nhiều cách để thực hiện điều này. Bài viết này sẽ tập trung vào hai công cụ mạnh mẽ và phổ biến: Fetch API và cú pháp async/await. Chúng ta sẽ đi sâu vào cách sử dụng chúng để lấy dữ liệu trong React, từ những khái niệm cơ bản nhất đến các ví dụ thực tế, giúp bạn tự tin xây dựng các ứng dụng tương tác với dữ liệu động.

1. Fetch API là gì?

Fetch API là một giao diện lập trình ứng dụng (API) dựa trên Promises, cung cấp một cách tiếp cận hiện đại và linh hoạt để thực hiện các yêu cầu mạng (network requests). Nó thay thế cho phương thức XMLHttpRequest cũ kỹ, mang lại cú pháp rõ ràng hơn và khả năng xử lý mạnh mẽ hơn.

1.1. Các thành phần chính của Fetch API

Fetch API bao gồm hai thành phần chính:

• fetch(url, options): Hàm này bắt đầu quá trình lấy tài nguyên. Nó nhận vào URL của tài nguyên bạn muốn lấy và một đối tượng options tùy chọn (chứa method, headers, body, v.v.). Hàm này trả về một Promise.
• Response object: Khi Promise từ fetch() được resolve, nó sẽ trả về một đối tượng Response. Đối tượng này đại diện cho phản hồi từ máy chủ, bao gồm các thuộc tính như status (mã trạng thái HTTP), ok (boolean cho biết yêu cầu có thành công hay không), và các phương thức để đọc nội dung phản hồi như json(), text(), blob().

1.2. Sự khác biệt so với XMLHttpRequest

• Cú pháp dựa trên Promises: Fetch API sử dụng Promises, giúp việc xử lý các hoạt động bất đồng bộ trở nên dễ dàng và mạch lạc hơn so với callback hell của XMLHttpRequest.
• Tách biệt logic: Fetch API tách biệt rõ ràng giữa việc gửi yêu cầu và xử lý phản hồi, làm cho code dễ đọc và bảo trì hơn.
• Linh hoạt hơn: Cung cấp nhiều tùy chọn hơn cho việc cấu hình yêu cầu, bao gồm cả việc xử lý các loại dữ liệu khác nhau.

2. Async/Await: Cú pháp bất đồng bộ hiện đại

Async/await là một cú pháp được giới thiệu trong ECMAScript 2017 (ES8) để làm việc với Promises một cách dễ dàng hơn. Nó cho phép bạn viết code bất đồng bộ trông giống như code tuần tự, loại bỏ sự phức tạp của việc sử dụng .then() và .catch() liên tục.

2.1. Từ Promises đến Async/Await

Hãy xem xét một ví dụ đơn giản với Promises:

function fetchDataWithPromises() {
  fetch('https://api.example.com/data')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('There was a problem with the fetch operation:', error);
    });
}

Bây giờ, hãy viết lại cùng chức năng đó bằng async/await:

async function fetchDataWithAsyncAwait() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error);
  }
}

Như bạn có thể thấy, phiên bản async/await:

• Dễ đọc hơn: Cú pháp trông giống như code tuần tự, giúp theo dõi luồng thực thi dễ dàng hơn.
• Xử lý lỗi đơn giản: Khối try...catch cho phép xử lý lỗi một cách tập trung, tương tự như cách xử lý lỗi trong code tuần tự.

2.2. Các khái niệm quan trọng

• async: Từ khóa này được đặt trước một hàm để khai báo rằng hàm đó sẽ hoạt động bất đồng bộ và luôn trả về một Promise.
• await: Từ khóa này chỉ có thể được sử dụng bên trong một hàm async. Nó tạm dừng việc thực thi hàm async cho đến khi Promise được resolve, sau đó trả về giá trị đã resolve.

3. Fetching Data trong React Components

Trong React, việc lấy dữ liệu thường được thực hiện bên trong các component, đặc biệt là trong các component class sử dụng componentDidMount hoặc các functional component sử dụng useEffect hook.

3.1. Sử dụng useEffect Hook (Functional Components)

Đây là cách tiếp cận hiện đại và được khuyến nghị cho các functional component.

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1'); // Thay thế bằng API endpoint thực tế
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // Dependency array rỗng nghĩa là effect này chỉ chạy một lần sau khi mount

  if (loading) {
    return <div>Loading data...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>Data Fetched:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataFetcher;