1. Fetch API là gì?
Trong các bài trước, chúng ta đã học Promise và Async/Await.
Bây giờ, chúng ta sẽ sử dụng những kiến thức đó để giao tiếp với máy chủ thông qua Fetch API.
fetch() là API có sẵn trong trình duyệt, cho phép JavaScript gửi HTTP request đến máy chủ và nhận dữ liệu trả về.
Ví dụ, 01 website có thể sử dụng Fetch API để:
Lấy danh sách bài viết từ Laravel.
Tìm kiếm bài viết mà không cần tải lại trang.
Gửi dữ liệu từ biểu mẫu đăng ký.
Lấy thông tin người dùng từ REST API.
Thêm, sửa, xóa dữ liệu thông qua API.
Hãy hình dung quy trình như sau:
Frontend — JavaScript
Gửi request bằng fetch()
Backend — Laravel 13
Xử lý request, truy vấn database
Database
Trả dữ liệu cho Laravel
Laravel trả response → JavaScript nhận dữ liệu → giao diện hiển thị kết quả.
Lưu ý: Fetch API không kết nối trực tiếp đến database. Nó giao tiếp với máy chủ thông qua HTTP.
2. Cú pháp cơ bản của Fetch API
Cú pháp đơn giản nhất:
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error("Lỗi:", error);
});Giải thích từng phần:
Thành phần | Ý nghĩa |
|---|---|
| Gửi request đến URL |
| Đối tượng response nhận từ máy chủ |
| Đọc body và phân tích JSON thành dữ liệu JavaScript |
| Dữ liệu sau khi phân tích |
| Xử lý lỗi mạng hoặc lỗi trong chuỗi Promise |
Trong ví dụ trên, chúng ta dùng một API công khai để thực hành, chưa cần cài đặt Laravel.
3. Sử dụng Fetch với Async/Await
Ở Bài 05, chúng ta đã học async/await.
Đây là cách viết thường dễ đọc hơn khi xử lý nhiều bước bất đồng bộ.
async function getPosts() {
try {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts"
);
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Lỗi:", error);
}
}
getPosts();Phân tích:
asynccho phép sử dụngawaitbên trong hàm.await fetch(...)chờ request hoàn tất và nhận response.await response.json()chờ đọc và phân tích nội dung JSON.try/catchgiúp xử lý những lỗi có thể xảy ra.
Điểm quan trọng: fetch() mặc định chỉ sử dụng phương thức GET nếu không khai báo phương thức khác.
4. Hiển thị dữ liệu lên giao diện HTML
Đây là ví dụ thực tế hơn: lấy danh sách bài viết và hiển thị chúng trên trang web.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API - Danh sách bài viết</title>
</head>
<body>
<h1>Danh sách bài viết</h1>
<button id="loadPosts">Tải bài viết</button>
<p id="status"></p>
<ul id="postList"></ul>
<script>
const button = document.getElementById("loadPosts");
const postList = document.getElementById("postList");
const status = document.getElementById("status");
button.addEventListener("click", async () => {
status.textContent = "Đang tải dữ liệu...";
postList.replaceChildren();
try {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts?_limit=5"
);
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const posts = await response.json();
posts.forEach(post => {
const li = document.createElement("li");
const title = document.createElement("h3");
const body = document.createElement("p");
title.textContent = post.title;
body.textContent = post.body;
li.append(title, body);
postList.appendChild(li);
});
status.textContent = "Tải dữ liệu thành công!";
} catch (error) {
status.textContent = "Không thể tải dữ liệu.";
console.error(error);
}
});
</script>
</body>
</html>
Bạn có thể lưu thành file index.html và mở bằng trình duyệt có kết nối Internet để thử nghiệm.
Kết quả mong đợi:
Ban đầu chỉ có tiêu đề và nút tải bài viết.
Nhấn nút, trình duyệt gửi request đến API.
Năm bài viết được hiển thị trên giao diện.
Nếu xảy ra lỗi, trang hiển thị thông báo tương ứng.
Ở đây, chúng ta sử dụng textContent thay vì chèn trực tiếp dữ liệu bên ngoài bằng innerHTML.
Đây là thói quen tốt để hạn chế rủi ro khi hiển thị dữ liệu không đáng tin cậy.
5. Kiểm tra lỗi HTTP khi dùng Fetch
Đây là kiến thức rất quan trọng khi làm việc với Laravel REST API.
Nhiều người mới học thường viết:
const response = await fetch("/api/posts");
const data = await response.json();Cách viết này có thể hoạt động, nhưng vẫn còn thiếu một bước kiểm tra.
Vấn đề: fetch() thường không tự ném lỗi khi máy chủ trả về các mã HTTP như 404 Not Found hoặc 500 Internal Server Error.
Vì vậy, nên kiểm tra response.ok:
async function getPosts() {
try {
const response = await fetch("/api/posts");
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const posts = await response.json();
console.log(posts);
} catch (error) {
console.error("Không thể lấy bài viết:", error);
}
}Cần phân biệt ba tình huống:
Tình huống | Cách xử lý |
|---|---|
Máy chủ trả | Kiểm tra và đọc dữ liệu |
Máy chủ trả | Kiểm tra |
Mất mạng, lỗi kết nối hoặc bị trình duyệt chặn bởi CORS | Xử lý ngoại lệ bằng |
Một lưu ý khác: nếu Laravel trả về JSON lỗi, chẳng hạn 422 Unprocessable Content, bạn có thể đọc phần JSON đó để hiển thị lỗi xác thực cho người dùng. Tuy nhiên, cần kiểm tra response.ok trước khi coi request là thành công.
6. Gửi dữ liệu bằng Fetch API
Fetch API không chỉ dùng để lấy dữ liệu. Chúng ta còn có thể gửi dữ liệu đến backend bằng các phương thức như POST, PUT, PATCH và DELETE.
Ví dụ gửi một bài viết mới:
async function createPost() {
try {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts",
{
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
},
body: JSON.stringify({
title: "Học Fetch API",
body: "Thực hành JavaScript với REST API",
userId: 1
})
}
);
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const result = await response.json();
console.log("Kết quả:", result);
} catch (error) {
console.error("Lỗi gửi dữ liệu:", error);
}
}
createPost();Giải thích:
method: "POST": khai báo phương thức gửi dữ liệu.headers: mô tả định dạng dữ liệu gửi và loại response mong muốn.JSON.stringify(): chuyển object JavaScript thành chuỗi JSON.body: nội dung request gửi lên máy chủ.
API dùng trong ví dụ là API mô phỏng.
Nó có thể trả về kết quả giả lập, không đồng nghĩa với việc dữ liệu đã được lưu bền vững vào database.
Fetch API và Laravel 13
Khi áp dụng vào dự án Laravel, quy trình có thể như sau:
Vue / JavaScript
|
| fetch("/api/posts")
v
Laravel Route
|
v
Controller
|
v
Model / Database
|
v
JSON Response
|
v
JavaScript cập nhật giao diệnVí dụ, Laravel định nghĩa route:
use App\Http\Controllers\PostController;
use Illuminate\Support\Facades\Route;
Route::get('/posts', [PostController::class, 'index']);Giả sử controller trả về danh sách bài viết dưới dạng JSON.
Phía JavaScript có thể lấy dữ liệu bằng:
async function getPosts() {
try {
const response = await fetch("/api/posts", {
headers: {
"Accept": "application/json"
}
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const posts = await response.json();
console.log(posts);
} catch (error) {
console.error("Lỗi:", error);
}
}
getPosts();Đường dẫn /api/posts ở đây chỉ hoạt động khi Laravel đã được cấu hình route tương ứng và frontend có thể truy cập đúng máy chủ.
Nếu frontend và backend ở hai origin khác nhau, cần cấu hình CORS phù hợp.
Các API cần xác thực cũng phải sử dụng cơ chế xác thực tương ứng; chỉ biết URL API không đồng nghĩa với việc được phép truy cập mọi dữ liệu.
7. Bài tập thực hành
KIỂM TRA KIẾN THỨC · 4 CÂU
Câu 1. Fetch API thường được sử dụng để làm gì?
Câu 2. Hàm nào dùng để phân tích response JSON?
Câu 3. Vì sao cần kiểm tra response.ok?
Câu 4. Dùng gì để chuyển object thành chuỗi JSON khi gửi request?
8. Tổng kết Bài 06
Sau bài này, bạn cần nắm được:
fetch()dùng để gửi HTTP request từ JavaScript.async/awaitgiúp viết mã bất đồng bộ dễ đọc hơn.response.json()đọc và phân tích dữ liệu JSON.response.okgiúp kiểm tra kết quả HTTP.JSON.stringify()chuyển object thành chuỗi JSON để gửi đi.Fetch API là một trong những cầu nối giữa frontend và Laravel REST API.
Bài 07 — Xử lý JSON & HTTP sẽ đi sâu vào cấu trúc JSON, HTTP methods, status codes, request headers, response headers và cách xử lý lỗi API. Đây là nền tảng cần thiết trước khi sang Bài 08: JavaScript gọi Laravel REST API.
✦ Made by AI ✦
x1
Không có nhận xét nào:
Đăng nhận xét