Khi xây dựng ứng dụng web, có lúc bạn muốn thực hiện yêu cầu HTTP truy cập tài nguyên bên ngoài. Ví dụ, bạn làm blog. Có thể muốn gọi API lấy danh sách bình luận hiển thị trên mỗi bài đăng.
Axios là thư viện JavaScript phổ biến dùng để tạo yêu cầu web. Trong hướng dẫn này, chúng ta giải thích cách dùng axios tạo yêu cầu GET. Chúng ta đi qua vài ví dụ trình bày axios hoạt động như thế nào và cách dùng trong mã.
Tại sao dùng Axios?
Axios là thư viện dựa trên Promise giúp dễ dàng tạo yêu cầu web.
Bạn có thể thắc mắc: tại sao dùng axios thay vì nhiều thư viện yêu cầu web khác? Đúng là có thư viện khác như fetch để tạo GET request, nhưng axios có lợi thế những thư viện đó không có.
Axios hỗ trợ trình duyệt cũ, tạo trải nghiệm người dùng dễ tiếp cận hơn. Axios cũng có bảo vệ CSRF tích hợp để ngăn chặn lỗ hổng. Nó cũng hoạt động trong Node.js, tuyệt vời nếu bạn phát triển ứng dụng web front-end hoặc back-end.
Cách cài đặt Axios
Trước khi tạo GET request dùng axios, bạn phải cài thư viện. Làm bằng lệnh:
npm install axios --save
Lệnh này cài axios và lưu vào file package.json cục bộ. Bây giờ bạn sẵn sàng dùng thư viện axios.
Cách tạo yêu cầu dùng Axios
Bắt đầu với axios đơn giản. Để tạo yêu cầu web, chỉ cần chỉ định URL muốn yêu cầu dữ liệu và phương thức muốn dùng.
Giả sử muốn lấy danh sách sự thật ngẫu nhiên về mèo từ API cat-facts. Làm bằng mã:
axios ({ url: "https://cat-fact.herokuapp.com/facts", method: "GET" )}
Mã trả về promise đại diện cho yêu cầu chưa hoàn thành. Để truy xuất dữ liệu từ yêu cầu HTTP, dùng hàm async/await như sau:
const axios = require("axios"); async function getCatFacts() { const response = await axios ({ url: "https://cat-fact.herokuapp.com/facts", method: "GET" }) console.log(response.data) } getCatFacts()
Máy chủ phản hồi danh sách sự thật về mèo.
Khi gọi hàm, yêu cầu HTTP GET được tạo đến API cat-facts. Dùng async/await để chương trình không tiếp tục cho đến khi yêu cầu web hoàn tất. Vì axios trả về promise trước. Trả về dữ liệu từ yêu cầu sau khi yêu cầu hoàn tất.
Thư viện axios có vài lệnh tắt tạo yêu cầu web:
- axios.get()
- axios.post()
- axios.delete()
- axios.put()
- axios.patch()
- axios.options()
Trong hướng dẫn, tập trung vào axios.get() và axios.post(), dùng cú pháp cơ bản giống các phương thức tắt khác.
Tạo GET Request dùng axios
Trong ví dụ trước, dùng axios tạo GET request. Nhưng có cách đơn giản hơn: dùng axios.get().
Giả sử muốn lấy danh sách sự thật về mèo, rồi đếm số lượng trả về. Làm bằng mã:
const axios = require("axios"); async function getCatFacts() { const response = await axios.get("https://cat-fact.herokuapp.com/facts") console.log(`${response.data.all.length} sự thật về mèo được trả về.`) } getCatFacts()
Mã tạo phản hồi: 225 sự thật về mèo được trả về.
Phân tích mã. Đầu tiên khai báo hàm async getCatFacts() tạo yêu cầu web.
Sau đó dùng axios.get() lấy danh sách sự thật mèo từ API; "response.data" giữ đối tượng phản hồi và body yêu cầu.
Cuối cùng, dùng thuộc tính .length tính số sự thật mèo trả về từ yêu cầu. Thêm số này vào chuỗi "sự thật về mèo được trả về".
Gửi Header dùng axios
Khi tạo GET request, bạn có thể cần gửi header tùy chỉnh đến tài nguyên web yêu cầu. Giả sử truy xuất dữ liệu từ API yêu cầu xác thực. Có thể cần chỉ định header xác thực.
Để chỉ định header với yêu cầu axios, dùng mã:
axios.get("https://urlhere.com", { headers: { "header-name": "header-value" } })
Mã gửi header "header-name" với giá trị "header-value" đến URL chỉ định.
Gửi tham số dùng axios
Nhiều API cho phép gửi tham số trong GET request. Ví dụ, API cho phép giới hạn số phản hồi trả về dùng tham số limit.
Chỉ định tham số gửi với yêu cầu web dễ dàng với axios. Bạn có thể đưa tham số như chuỗi truy vấn, hoặc dùng thuộc tính params. Ví dụ axios tạo yêu cầu web dùng chuỗi truy vấn chỉ định tham số:
axios;get("https://urlhere.com/?date=2020-05-15")
Thay vào đó, chỉ định thuộc tính params trong tùy chọn axios bằng mã:
axios;get("https://urlhere.com/?date=2020-05-15", { params: { date: "2020-05-15" } })
Cả hai ví dụ gửi tham số tên "date" giá trị "2020-05-15" đến URL chỉ định.
Cách tạo POST Request dùng axios
Cú pháp tạo POST request giống tạo GET request. Khác biệt là dùng phương thức axios.post() thay axios.get().
Giả sử muốn tạo post request đến API. Làm bằng mã:
axios.post("https://urlhere.com")
Bạn chỉ định header và tham số giống như tạo GET request. Giả sử muốn gửi header "Name" giá trị "James" với POST request. Làm bằng mã:
axios.post("https://urlhere.com", { headers: { "Name": "James" } })
Kết luận
Thư viện axios dùng tạo yêu cầu web trong JavaScript. Dùng được cả front-end bằng JavaScript hoặc back-end bằng nền tảng như Node.js. Khác với thư viện yêu cầu web khác, axios có bảo vệ CSRF tích hợp, hỗ trợ trình duyệt cũ và dùng cấu trúc promise. Hoàn hảo cho tạo yêu cầu web.
Bây giờ bạn sẵn sàng tạo GET và POST request dùng axios như nhà phát triển web chuyên nghiệp.