💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!

Cập nhật: 31 tháng 5 năm 2026

Lấy dữ liệu API | Hướng dẫn và bài tập

📌

Kết luận

Dùng fetch() để lấy dữ liệu từ máy chủ (API)

📝 Mã thực tế tại đây

const res = await fetch('https://api.example.com/data');
const data = await res.json();
console.log(data);

Quy trình sử dụng fetch

Bước	Hành động
1. Gửi yêu cầu	`fetch(URL)`
2. Kiểm tra phản hồi	Kiểm tra `res.ok`
3. Giải mã dữ liệu	`await res.json()`
4. Sử dụng	Hiển thị dữ liệu lên trang

Tổng kết

- fetch() gửi yêu cầu HTTP - Cần dùng await res.json() để đọc nội dung JSON - Phải được đặt trong hàm có từ khóa async

Hãy thử trong phần bài tập

Hãy thử lấy dữ liệu từ API và xuất tiêu đề ra console nhé.

🧪 Thử nghiệm tại đây

Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.

Thử ngay

■ Bài tập thực hành

Dùng fetch để lấy dữ liệu từ API và xuất tiêu đề (title) ra console.

Gợi ý khi gặp khó khăn

fetch(url) -> response.json() -> data.title

25pt

Lấy dữ liệu API

Dùng fetch để lấy dữ liệu từ API và xuất tiêu đề (title) ra console.

Mã nguồn

Xem trước

Lỗi & Console

Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.

Lộ trình học · Toàn bộ bài giảng

Đi sâu bài tập này

"Lấy dữ liệu API" là bài JavaScript mức 中級. Dùng fetch để lấy dữ liệu từ API và xuất tiêu đề (title) ra console. Chạy ngay trên trình duyệt với kiểm tra tự động.

fetch là cách tiêu chuẩn để giao tiếp với các máy chủ và nhận dữ liệu (thường là JSON). Mẫu tương tự xuất hiện trong review code và UI thực tế.

Kết hợp với lộ trình api. Bài #64 củng cố kỹ năng api.

Quy trình từng bước

Đọc bài giải thích và nắm mục tiêu "Lấy dữ liệu API"
Kiểm tra cột JavaScript và bắt đầu từ mã mẫu
Mở gợi ý nếu bí, so sánh với lời giải
Bấm Chạy để xem preview/console
Hệ thống kiểm tra có chứa: sunt, aut, title.
Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải

JavaScript dùng: console.log, fetch(, async , await . Kiểm tra typo và await. Giải thích: fetch là cách tiêu chuẩn để giao tiếp với các máy chủ và nhận dữ liệu (thường là JSON). Gợi ý: fetch(url) -> response.json() -> data.title

Ứng dụng thực tế & nghề nghiệp

fetch + JSON trong hầu hết dự án thực: thời tiết, GitHub, headless CMS.

Lỗi thường gặp

Bỏ qua gợi ý: fetch(url) -> response.json() -> data.title
Quên await res.json() sau fetch
Quên res.json() sau fetch
Nhầm CORS là lỗi code
Không try-catch khi mạng lỗi

Xử lý sự cố

Preview không đổi sau khi chạy: Kiểm tra bạn sửa đúng cột JavaScript và đã bấm Chạy.
Đúng nhưng không pass: Hệ thống kiểm tra có chứa: sunt, aut, title. Kiểm tra typo và thẻ đóng.
Lỗi trên console: Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
Khó gõ trên điện thoại: Dùng màn ngang hoặc mở cùng URL trên PC.

Mẹo phỏng vấn & portfolio

Giải thích kỹ thuật trong "Lấy dữ liệu API" bằng lời của bạn trong 30 giây
Luyện mô tả từng dòng mã giải trên bảng trắng
Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại

Thuật ngữ

fetch: API HTTP của trình duyệt.
JSON: Định dạng trao đổi dữ liệu.
CORS: Chính sách bảo mật cross-origin.

Từ khóa trên trang này

Trang này là bài tập miễn phí về Lấy dữ liệu API cho từ khóa: Lấy dữ liệu API, api, 中級, https, console.log, fetch(, async , await , api fetch.

Công cụ liên quan

Lộ trình học

Lộ trình học →

Bài tập liên quan

Câu hỏi thường gặp (FAQ)

Lấy dữ liệu API có miễn phí không?

Bài tập này hoàn toàn miễn phí và chạy ngay trên trình duyệt. Không cần đăng ký hay thẻ tín dụng.

Độ khó và thời gian?

"Lấy dữ liệu API" ở mức "中級". Đọc hướng dẫn trước; người mới thường hoàn thành trong 30 phút. Mỗi bài khoảng 5–15 phút. Dùng gợi ý, sau đó xem lời giải nếu bí.

Sau khi đúng làm gì?

Sau khi đúng, dùng liên kết bài tiếp theo. Hoàn thành danh mục rồi sang lộ trình học.

Làm trên điện thoại được không?

Chạy trên trình duyệt di động, nhưng gõ mã trên máy tính tiện hơn.

Bài tập khác ở đâu?

Danh sách bài tập: /vi/learn/ có bộ lọc danh mục.

Điểm cần nhớ trong "Lấy dữ liệu API"?

fetch là cách tiêu chuẩn để giao tiếp với các máy chủ và nhận dữ liệu (thường là JSON). Gợi ý: fetch(url) -> response.json() -> data.title

Vị trí danh mục api?

fetch + JSON trong hầu hết dự án thực: thời tiết, GitHub, headless CMS.

Các bước cụ thể cho "Lấy dữ liệu API"?

1. Đọc bài giải thích và nắm mục tiêu "Lấy dữ liệu API"
2. Kiểm tra cột JavaScript và bắt đầu từ mã mẫu
3. Mở gợi ý nếu bí, so sánh với lời giải
4. Bấm Chạy để xem preview/console
5. Hệ thống kiểm tra có chứa: sunt, aut, title.
6. Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải?

JavaScript dùng: console.log, fetch(, async , await . Kiểm tra typo và await.

Giải thích: fetch là cách tiêu chuẩn để giao tiếp với các máy chủ và nhận dữ liệu (thường là JSON).

Gợi ý: fetch(url) -> response.json() -> data.title

Khi gặp sự cố?

Preview không đổi sau khi chạy → Kiểm tra bạn sửa đúng cột JavaScript và đã bấm Chạy.
Đúng nhưng không pass → Hệ thống kiểm tra có chứa: sunt, aut, title. Kiểm tra typo và thẻ đóng.
Lỗi trên console → Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
Khó gõ trên điện thoại → Dùng màn ngang hoặc mở cùng URL trên PC.

Liên quan nghề nghiệp?

Giải thích kỹ thuật trong "Lấy dữ liệu API" bằng lời của bạn trong 30 giây Luyện mô tả từng dòng mã giải trên bảng trắng Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại

Công cụ liên quan?

JSON Formatter, JWT Decode, DNS Check

Kiến thức nền?

Đọc Lộ trình học trước.

ツール一覧