🌐
Kết nối API
2 tuần Trung cấpLấy dữ liệu từ bên ngoài và hiển thị lên trang web.
Tổng quan
Cái này là gì?
API là cách các ứng dụng nói chuyện với nhau.
Tại sao lại quan trọng?
Hầu hết các ứng dụng hiện nay đều dùng API.
Bạn sẽ học được gì
- fetch
- JSON
- async/await
Chi tiết
Xử lý bất đồng bộ
JS không đợi các tác vụ tốn thời gian (như lấy dữ liệu từ mạng) mà sẽ chạy tiếp. Cần dùng async/await để xử lý thứ tự.
Ví dụ:
- await fetch(url)
Tips:
- await chỉ dùng được trong hàm async
Lỗi thường gặp:
- Quên await dẫn đến lấy dữ liệu chưa xong đã sử dụng
fetch và JSON
Dùng fetch để gọi API và res.json() để chuyển dữ liệu về dạng đối tượng JS.
Ví dụ:
- const data = await res.json()
Xử lý lỗi (try-catch)
Luôn bọc lời gọi API trong try-catch đề phòng mạng lỗi hoặc server sập.
Ví dụ:
- try { ... } catch (e) { ... }
Tips:
- Kiểm tra res.ok để biết server có trả lỗi 404/500 không
Các bước thực hành
- 1 Lấy dữ liệu từ API 3 phút
Gọi thử một API mẫu.
- Dùng fetch
- In kết quả ra console
const res = await fetch('https://jsonplaceholder.typicode.com/users/1');\nconst data = await res.json(); - 2 Hiển thị lên màn hình 5 phút
Đưa dữ liệu lấy được vào HTML.
- Dùng textContent để gán dữ liệu vào div
div.textContent = data.name;
Vị trí nghề nghiệp & thực tế
API là ranh giới junior/mid frontend—cầu nối tới React Query/Next.
Ví dụ trong ngành
- API thời tiết
- GitHub REST
- Headless CMS
Kế hoạch học đề xuất
fetch → JSON → lỗi → async/await → UI loading.
Kiến thức nền
API là ranh giới junior/mid frontend—cầu nối tới React Query/Next.…
Câu hỏi thường gặp
- CORS error là gì?
- Lỗi bảo mật khi trình duyệt ngăn bạn lấy dữ liệu từ một trang web khác. Thường phải cấu hình ở phía Server để cho phép.
- fetch hay Axios?
- fetch có sẵn trong trình duyệt, Axios cần cài thêm nhưng tiện hơn. Người mới nên học fetch trước.
- Lỗi CORS?
- Bảo mật trình duyệt—cần header server.
- axios vs fetch?
- Học fetch trước, axios sau.
① Đã đọc giải thích. Tiếp theo ② Làm bài tập.
Đã biết dùng API.
Thực hiện dự án thực tế đầu tiên.