ReactJS - Lập Trình HTTP Client

Xin chào, các bạn lập trình viên đang trên đà phát triển! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của ReactJS và lập trình HTTP client. Là người thầy máy tính gần gũi của bạn, tôi ở đây để hướng dẫn bạn từng bước trong cuộc phiêu lưu này. Vậy, hãy lấy cặp sách ảo của bạn và cùng bắt đầu!

Hiểu Các Cơ Bản

Trước khi chúng ta lặn sâu vào chi tiết của lập trình HTTP client trong ReactJS, hãy cùng dành một chút thời gian để hiểu những gì chúng ta đang làm việc với.

HTTP là gì?

HTTP là viết tắt của Hypertext Transfer Protocol. Nó giống như ngôn ngữ mà các máy tính sử dụng để giao tiếp với nhau qua internet. Khi bạn duyệt một trang web, máy tính của bạn liên tục gửi yêu cầu HTTP và nhận phản hồi HTTP.

Client là gì?

Trong ngữ cảnh của chúng ta, một client thường là một trình duyệt web hoặc ứng dụng di động gửi yêu cầu đến máy chủ và nhận phản hồi. Hãy tưởng tượng bạn (client) đặt món ăn (gửi yêu cầu) từ một nhà hàng (máy chủ).

ReactJS là gì?

ReactJS là một thư viện JavaScript phổ biến để xây dựng giao diện người dùng. Nó giống như một bộ công cụ ma thuật giúp chúng ta tạo ra các ứng dụng web tương tác và động một cách dễ dàng.

Máy Chủ API Quản Lý Chi Tiêu

Bây giờ, hãy tưởng tượng chúng ta đang xây dựng một ứng dụng theo dõi chi tiêu. Chúng ta cần một cách để giao tiếp với máy chủ backend để lưu trữ và truy xuất dữ liệu chi tiêu. Đây là lúc máy chủ API Quản Lý Chi Tiêu của chúng ta vào cuộc.

API REST là gì?

API REST (Representational State Transfer) là một bộ quy tắc mà các nhà phát triển tuân theo khi tạo API của họ. Nó giống như một ngôn ngữ tiêu chuẩn cho phép các ứng dụng phần mềm khác nhau giao tiếp với nhau.

Dưới đây là một ví dụ đơn giản về cách chúng ta có thể cấu trúc API Quản Lý Chi Tiêu của mình:

Phương Thức HTTP	Điểm Cuối	Mô Tả
GET	/expenses	Truy xuất tất cả chi tiêu
GET	/expenses/:id	Truy xuất một chi tiêu cụ thể
POST	/expenses	Tạo một chi tiêu mới
PUT	/expenses/:id	Cập nhật một chi tiêu hiện có
DELETE	/expenses/:id	Xóa một chi tiêu

API fetch()

Bây giờ chúng ta đã hiểu cấu trúc API của mình, hãy học cách tương tác với nó bằng hàm fetch()内置 trong JavaScript.

fetch() là gì?

Hàm fetch() là một cách hiện đại để gửi yêu cầu HTTP trong JavaScript. Nó giống như một người đưa tin mà chúng ta gửi đi để lấy hoặc gửi dữ liệu đến máy chủ.

Hãy xem một số ví dụ:

Truy xuất Tất Cả Chi Tiêu

function getAllExpenses() {
fetch('https://api.example.com/expenses')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
}

Trong ví dụ này:

1. Chúng ta sử dụng fetch() để gửi yêu cầu GET đến điểm cuối API.
2. Chúng ta chuyển đổi phản hồi thành định dạng JSON.
3. Chúng ta ghi dữ liệu vào console.
4. Nếu có lỗi, chúng ta bắt lấy và ghi lại.

Tạo Một Chi Tiêu Mới

function createExpense(expense) {
fetch('https://api.example.com/expenses', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(expense),
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));
}

// Sử dụng
const newExpense = { description: 'Ăn trưa', amount: 15.99 };
createExpense(newExpense);

Trong ví dụ này:

1. Chúng ta xác định phương thức HTTP là 'POST'.
2. Chúng ta đặt loại nội dung là JSON trong các phần đầu.
3. Chúng ta chuyển đổi đối tượng chi tiêu của chúng ta thành một chuỗi JSON trong thân.
4. Chúng ta xử lý phản hồi tương tự như yêu cầu GET.

Cập Nhật Một Chi Tiêu

function updateExpense(id, updatedExpense) {
fetch(`https://api.example.com/expenses/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(updatedExpense),
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));
}

// Sử dụng
const updatedExpense = { description: 'Ăn tối', amount: 25.99 };
updateExpense(1, updatedExpense);

Ví dụ này tương tự như tạo một chi tiêu mới, nhưng chúng ta sử dụng phương thức 'PUT' và bao gồm ID chi tiêu trong URL.

Xóa Một Chi Tiêu

function deleteExpense(id) {
fetch(`https://api.example.com/expenses/${id}`, {
method: 'DELETE',
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));
}

// Sử dụng
deleteExpense(1);

Để xóa, chúng ta đơn giản chỉ cần xác định phương thức 'DELETE' và bao gồm ID chi tiêu trong URL.

Tích Hợp Với Component React

Bây giờ chúng ta đã hiểu cách gửi yêu cầu HTTP, hãy xem cách chúng ta có thể tích hợp điều này vào một component React.

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

function ExpenseList() {
const [expenses, setExpenses] = useState([]);

useEffect(() => {
fetch('https://api.example.com/expenses')
.then(response => response.json())
.then(data => setExpenses(data))
.catch(error => console.error('Error:', error));
}, []);

return (
<ul>
{expenses.map(expense => (
<li key={expense.id}>{expense.description}: ${expense.amount}</li>
))}
</ul>
);
}

Trong component này:

1. Chúng ta sử dụng hook useState để quản lý trạng thái chi tiêu.
2. Chúng ta sử dụng hook useEffect để gửi yêu cầu GET khi component được装载.
3. Chúng ta hiển thị chi tiêu dưới dạng danh sách.

Kết Luận

Chúc mừng! Bạn đã chính thức bước những bước đầu tiên vào thế giới lập trình HTTP client với ReactJS. Nhớ rằng, giống như học bất kỳ ngôn ngữ mới nào, việc gyak và mắc lỗi sẽ giúp bạn hoàn thiện kỹ năng. Đừng sợ thử nghiệm và mắc lỗi - đó là cách chúng ta học hỏi và phát triển như một nhà phát triển.

Trong bài học tiếp theo, chúng ta sẽ khám phá các chủ đề nâng cao hơn như xử lý lỗi, trạng thái tải và cách tạo một ứng dụng theo dõi chi tiêu mạnh mẽ và thân thiện với người dùng hơn. Đến那时候, chúc bạn lập trình vui vẻ!

Credits: Image by storyset