Nhà phát triển thường phải lấy dữ liệu từ API riêng hoặc API bên thứ ba. Bài viết này nói về việc dùng Fetch API của trình duyệt để GET dữ liệu từ endpoint.
Fetch API là gì?
Fetch API là giao diện cho phép tạo HTTP Request đến server từ trình duyệt web như Chrome hoặc Firefox. GET request gọi endpoint trên server rồi trả về response chứa dữ liệu từ endpoint đó để bạn đọc.
Các loại request
GET HTTP Request chỉ là một loại request có thể gửi đến server. Các loại khác: POST, PUT, DELETE. Những request này tạo thành ứng dụng CRUD: Create (POST), Read (GET), Update (PUT), Destroy (DELETE) dữ liệu trong database.
Ngoài ra, có thể gọi endpoint trên API bên thứ ba. Tùy API, bạn chỉ được phép thực hiện một số request nhất định, chủ yếu để giữ dữ liệu bất biến (immutable), nên không thể làm request thao túng dữ liệu, chỉ đọc được.
Fetch API hoạt động như thế nào?
Fetch API dùng hệ thống giao tiếp dựa trên Promise. Nhắc lại: Promise là hàm bất đồng bộ đóng gói logic vào block code và trả về phản hồi xác định promise resolved hay rejected.
Là người dùng Fetch API, ta không cần tự viết logic promise. Chỉ cần dùng nó gửi request và Fetch API trả về promise "dưới mũi". Cú pháp cơ bản lấy response:
promise.then(response).then(json).catch(error);
Promise là request bất đồng bộ thực tế. Phương thức fetch() có sẵn trong global scope và nhận endpoint muốn tạo HTTP request.
let promise = fetch("https://swapi.dev/api/films/1");
Sau request, có thể dùng cú pháp promise với then/catch hoặc dùng async/await để lấy response từ server.
Cú pháp Promise
promise.then(response => {
if (response.status !== 200) {
console.log('Có vấn đề. Status Code: ' + response.status);
return;
}
response.json().then(data => {
console.log(data);
}).catch(error => {
console.log(error.message);
})
})
Ta lấy promise rồi chờ response. Khi có response, nếu status code khác 200, log lỗi ra console và dừng hàm.
Ngược lại, để response đọc được cho frontend, chuyển sang JavaScript Object Notation (JSON) object với phương thức json(). Muốn evaluate xong trước khi tiếp tục, nên chain thêm promise vào promise trước.
Sau khi evaluate xong, log dữ liệu ra console. Nếu bạn làm theo, sẽ nhận được dữ liệu phim Star Wars (A New Hope) từ SWAPI.
Async/Await
Cũng có thể dùng async/await log cùng kết quả:
let getRequest = async () => {
try {
let fetched = await fetch("https://swapi.dev/api/films/1");
if(fetched) {
let read = await fetched.json()
console.log(read);
return read;
}
} catch (error) {
throw new Error(error.message);
}
}
getRequest()
Từ khóa async báo hiệu phần nào của hàm sẽ bất đồng bộ. Khi gặp await, thực thi script tạm dừng cho đến khi dòng code đó evaluate xong.
Có hai await trong hàm này, tương đương hai then() trong logic promise. Một chờ fetch tại URL, một chờ fetched info parse thành JSON. Dùng try/catch bắt lỗi nếu response bất thường.
Lưu ý cuối
Để Fetch API chạy trong môi trường node (ví dụ dùng IDE như VS Code), cần yarn add hoặc npm install node-fetch, vì fetch chỉ chạy trong môi trường trình duyệt.