Cách sử dụng Fetch APIs trong React

Trong phát triển web hiện đại, việc tích hợp dữ liệu từ các nguồn bên ngoài là một yêu cầu phổ biến. React, một thư viện JavaScript phổ biến để xây dựng giao diện người dùng, cung cấp một cách đơn giản để lấy dữ liệu từ API.

Trong hướng dẫn này, chúng ta sẽ khám phá quy trình lấy dữ liệu từ một API trong React, kèm theo một ví dụ thực tế. Hơn nữa, chúng tôi sẽ cung cấp một cách đơn giản để tạo mã Fetch Client chỉ với một cú nhấp chuột trong Apidog.

API là gì?

API (Giao diện lập trình ứng dụng) là một tập hợp các quy tắc và giao thức cho phép các ứng dụng phần mềm khác nhau giao tiếp và tương tác với nhau.

Ví dụ, khi bạn sử dụng một ứng dụng thời tiết trên điện thoại, nó có thể tương tác với API của dịch vụ thời tiết đểretrieve dữ liệu thời tiết hiện tại cho vị trí của bạn. Ứng dụng gửi một yêu cầu đến API của dịch vụ thời tiết theo một định dạng cụ thể, và API phản hồi với thông tin thời tiết mà bạn yêu cầu, giúp tích hợp liền mạch giữa hai hệ thống phần mềm.

Tạo API trong React với Fetch API

Fetch API cung cấp một giao diện hiện đại để thực hiện các yêu cầu HTTP như GET và POST từ trình duyệt. Nó sử dụng các promise của JavaScript, giúp làm việc với yêu cầu và phản hồi dễ dàng hơn. Để thực hiện một yêu cầu, bạn chỉ cần gọi phương thức fetch(), truyền vào URL để lấy dữ liệu và sau đó xử lý phản hồi khi nó kết thúc. Điều này đơn giản hơn nhiều so với làm việc trực tiếp với XMLHttp Requests.

Khi sử dụng Fetch với React, bạn có thể thực hiện các yêu cầu trong các phương thức vòng đời của component như useEffect và cập nhật trạng thái của component khi nhận được dữ liệu. Điều này cho phép bạn lấy dữ liệu từ một API và hiển thị nó trong giao diện người dùng của bạn.

Fetch API tích hợp tốt với React vì cả hai đều sử dụng các promise. Bạn có thể xử lý trạng thái tải và lỗi để mang lại trải nghiệm mượt mà cho người dùng. Nhìn chung, Fetch kết hợp với React là một sự kết hợp rất mạnh mẽ để xây dựng các ứng dụng đơn trang dựa trên dữ liệu.

Cách sử dụng Fetch APIs trong React với ví dụ chi tiết

Đối với những người quen thuộc với thư viện JavaScript, đây là một cách khác để sử dụng Fetch API trong React.

Tạo một ứng dụng React

Thiết lập một dự án React bao gồm một loạt các bước. Đây là một hướng dẫn cơ bản để giúp bạn bắt đầu:

1.Cài đặt Node.js và npm: Tải xuống và cài đặt Node.js và npm từ https://nodejs.org/.

2. Tạo một ứng dụng React: Mở terminal của bạn và chạy npx create-react-app my-react-app. Thay thế "my-react-app" bằng tên dự án mà bạn yêu thích.

3. Bắt đầu máy chủ phát triển:

• Di chuyển vào thư mục dự án của bạn với cd my-react-app.
• Khởi động máy chủ phát triển với npm start.
• Ứng dụng React của bạn sẽ mở tại http://localhost:3000/ trong trình duyệt.

Chỉ đơn giản vậy thôi! Bạn đã thành công trong việc tạo một ứng dụng React chỉ với ba bước đơn giản. Bây giờ bạn có thể quay vào mã của mình, thực hiện các thay đổi và thấy được sự thay đổi ngay lập tức khi bạn phát triển ứng dụng.

Sử dụng Fetch API trong React

Sử dụng Fetch API trong React liên quan đến việc thực hiện các yêu cầu HTTP đến các tài nguyên hoặc API bên ngoài. Đây là một hướng dẫn đơn giản về cách sử dụng Fetch API trong một component React:

Bước 1: Nhập React và hook useState

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

Bước 2: Tạo một component chức năng

function MyComponent() {
  // Trạng thái để lưu trữ dữ liệu đã lấy
  const [data, setData] = useState(null);

  // Hiệu ứng để lấy dữ liệu khi component được gắn
  useEffect(() => {
    fetchData();
  }, []); // Mảng phụ thuộc trống đảm bảo hiệu ứng chạy một lần khi gắn

  // Hàm để lấy dữ liệu
  const fetchData = async () => {
    try {
      // Thực hiện yêu cầu GET bằng Fetch API
      const response = await fetch('https://api.example.com/data');
      
      // Kiểm tra xem phản hồi có thành công không (mã trạng thái 200-299)
      if (!response.ok) {
        throw new Error('Phản hồi mạng không hợp lệ');
      }

      // Phân tích dữ liệu JSON từ phản hồi
      const result = await response.json();

      // Cập nhật trạng thái với dữ liệu đã lấy
      setData(result);
    } catch (error) {
      console.error('Lỗi khi lấy dữ liệu:', error.message);
    }
  };

  // Phân render component
  return (
    <div>
      {data ? (
        // Hiển thị dữ liệu đã lấy
        <p>{JSON.stringify(data)}</p>
      ) : (
        // Hiển thị thông điệp tải hoặc giao diện khác trong khi dữ liệu đang được lấy
        <p>Đang tải...</p>
      )}
    </div>
  );
}

export default MyComponent;

Bước 3: Sử dụng Component

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <h1>Ví dụ Fetch trong React</h1>
      <MyComponent />
    </div>
  );
}

export default App;

Trong ví dụ này:

• Chúng tôi sử dụng hàm fetch để thực hiện một yêu cầu GET đến một điểm cuối API giả định (https://api.example.com/data).
• Chúng tôi xử lý phản hồi, kiểm tra xem nó có thành công không và phân tích dữ liệu JSON.
• Dữ liệu đã lấy được lưu trữ trong trạng thái của component bằng cách sử dụng hàm setData.
• Component hiển thị dữ liệu đã lấy hoặc một thông điệp tải, tùy thuộc vào trạng thái.

Tạo mã client chỉ với một cú nhấp chuột với Apidog

Tích hợp mượt mà với các dịch vụ backend là một nền tảng của phát triển frontend, thường được thực hiện thông qua Fetch API. Giao diện này tạo điều kiện cho các yêu cầu HTTP đơn giản trực tiếp từ trình duyệt, cho phép các ứng dụng React có khả năng dễ dàng lấy dữ liệu từ backend hoặc các API bên ngoài.

Đối với những nhà phát triển có thể thấy việc lập trình chi tiết các yêu cầu API trong React quá khó khăn, các công cụ tạo mã client chỉ với một cú nhấp chuột như Apidog cung cấp một cách tiết kiệm thời gian quý giá. Đây là một API cửa hàng thú cưng POST dưới dạng ví dụ.

Nhấp vào biểu tượng để tạo mã client như sau:

Đây là kết quả Dữ liệu Fetch.

Apidog đơn giản hóa quy trình này bằng cách chuyển đổi đặc tả API backend thành mã sẵn sàng cho phía client, phù hợp chính xác với các cấu trúc dữ liệu và điểm cuối cần thiết, đồng thời tránh được sự phức tạp và lỗi liên quan đến lập trình thủ công.

Tích hợp mã client đã tạo vào ứng dụng React

Mã client đã tạo có thể được tích hợp vào ứng dụng React bằng cách thực hiện theo các bước chung sau:

1. Nhập các tệp đã tạo vào ứng dụng React: Sao chép các tệp đã tạo (hoặc toàn bộ thư mục) vào dự án React của bạn. Đảm bảo rằng các tệp này tương thích với cấu trúc dự án của bạn.

2. Nhập và sử dụng các hàm yêu cầu API đã tạo: Trong component React của bạn hoặc một vị trí thích hợp khác, nhập các hàm yêu cầu API đã tạo và sử dụng chúng. Ví dụ:

import { createPet, getPetById } from './path/to/generated/api';

// Sử dụng trong một component hoặc nơi khác
async function fetchData() {
  try {
    const newPet = await createPet({ name: 'Fido', age: 2 });
    const petDetails = await getPetById(newPet.id);
    console.log(petDetails);
  } catch (error) {
    console.error('Lỗi khi lấy dữ liệu:', error.message);
  }
}

3. Xử lý dữ liệu: Xử lý dữ liệu trả về từ các yêu cầu API, có thể cập nhật trạng thái component, render giao diện người dùng, v.v.

Mẹo thưởng của Apidog:

Lợi thế của việc tận dụng Apidog mở rộng đến tính năng giả lập của nó, cho phép các nhà phát triển giả lập phản hồi từ backend, đây là khả năng quan trọng trong các giai đoạn phát triển sớm hoặc khi các API backend vẫn chưa sẵn sàng.

Dữ liệu giả lập này đảm bảo rằng phát triển frontend vẫn đúng tiến độ, cho phép làm việc trên giao diện người dùng, trải nghiệm người dùng và logic ứng dụng tổng thể mà không phụ thuộc vào sự sẵn sàng của backend.