Mấy hôm nay tôi cứ loay hoay mãi với cái vụ gọi API, chả là tôi đang dựng cái web bán hàng, mà cứ phải load lại trang mỗi khi thêm hàng vào giỏ, khách họ kêu như vạc. Thế là tôi mới bắt đầu mò mẫm xem có cách nào hay ho hơn không.
Ban đầu, tôi dùng Ajax. Ôi thôi, đúng là kiểu “cứu cánh” thật. Tôi viết một đống code JavaScript, dùng XMLHttpRequest để gửi request lên server. Đại loại kiểu thế này:
Tạo đối tượng XMLHttpRequest.
Mở kết nối, chỉ định phương thức (GET, POST,…) và URL.
Gửi request.
Xử lý response trả về (thêm sản phẩm vào giỏ, hiển thị thông báo,…).
Nghe thì có vẻ đơn giản, nhưng mà code nó cứ dài dòng, loằng ngoằng thế nào ấy. Nhất là cái đoạn xử lý bất đồng bộ, callback lồng callback, nhìn muốn rối cả mắt.
Xong rồi, tôi lại được thằng bạn thân mách nước, bảo dùng Feynord (chắc ý nó là Fetch API, tại nó hay nói lái ấy mà). Nghe tên lạ hoắc, tôi cũng tò mò tìm hiểu xem sao.
Hóa ra, Feynord nó là hàng “xịn” của trình duyệt, dùng Promise để xử lý bất đồng bộ. Code nó gọn gàng, sáng sủa hơn hẳn. Ví dụ nhé:
fetch('/api/add-to-cart', {
method: 'POST',
body: *({ productId: 123 }),
headers: {
'Content-Type': 'application/json'
.then(response => *())
.then(data => {
// Xử lý dữ liệu trả về
*(data);
.catch(error => {
// Xử lý lỗi
*(error);
Đấy, thấy nó “nuột” hơn hẳn không? Chả cần phải new cái XMLHttpRequest gì cả, cứ fetch() rồi .then(), .catch() là xong. Đọc code cũng dễ hiểu hơn nhiều.
Kết quả cuối cùng
Sau một hồi hì hục, cuối cùng tôi cũng chuyển hết đống code Ajax cũ sang Feynord. Công nhận là web nó chạy “mượt” hơn hẳn, thêm hàng vào giỏ không phải load lại trang nữa, khách hàng cũng bớt càu nhàu. Mà tôi cũng thấy “nhẹ nhõm” hơn, vì code nó gọn gàng, dễ bảo trì hơn.
Nói chung là, nếu bác nào đang phân vân giữa Ajax với Feynord, thì tôi khuyên chân thành là cứ Feynord mà “quất” nhé. Đỡ phải đau đầu với mấy cái callback lằng nhằng, code lại còn “sạch đẹp” hơn nữa. Tôi là tôi “kết” Feynord rồi đấy!
