Axios là một trong những giải pháp hàng đầu được các nhà phát triển sử dụng để tối ưu hóa quá trình giao tiếp giữa frontend và backend. Thông qua Axios, bạn có thể tập trung vào logic của ứng dụng thay vì phải lo lắng các vấn đề kỹ thuật liên quan đến việc gửi và nhận dữ liệu qua mạng. Vậy, Axios là gì và làm cách nào để xây dựng ứng dụng với Axios? Mời bạn cùng tìm hiểu tại đây!
Axios là gì?
Axios là một thư viện HTTP client trong Javascript được thiết kế dựa trên đối tượng Promise. Công cụ này thường được sử dụng phổ biến trong các ứng dụng frontend như Angular, React hay Vue.js… Với Axios, người dùng có thể dễ dàng gửi đi các request (yêu cầu) HTTP bất động bộ như GET, POST, DELETE, PUT đến các REST endpoint và thực hiện các chức năng Create, Read, Update, Delete (hay gọi tắt là CRUD) đơn giản và linh hoạt.
![Axios là gì? Cách xây dựng ứng dụng với Axios 2 Axios là một thư viện HTTP client trong Javascript được tối ưu dựa trên đối tượng Promise](https://static-xf1.vietnix.vn/wp-content/uploads/2024/07/Axios-la-gi.jpg)
Không chỉ thế, Axios còn cung cấp nhiều tính năng hữu ích khác như:
- Interceptor: Hỗ trợ can thiệp vào quá trình gửi và nhận yêu cầu.
- Transform data: Cho phép thao tác với dữ liệu trước khi gửi và nhận.
- XSRF protection: Bảo vệ ứng dụng trước rủi ro đến từ các cuộc tấn công XSRF.
Có thể nói rằng, với những đặc điểm trên, Axios sẽ là công cụ hỗ trợ đắc lực giúp bạn tối ưu hóa quá trình giao tiếp giữa frontend và backend trong các ứng dụng web hiện nay.
Các tính năng của Axios là gì
Dưới đây là một số tính năng chính của Axios:
- Tạo request HTML từ trình duyệt web một cách dễ dàng bằng công nghệ XMLHttpRequest.
- Tạo và gửi các request HTML trong môi trường Node.js bằng http.
- Hỗ trợ và tích hợp với Promise API để tối ưu quá trình xử lý các request.
- Cho phép can thiệp vào quá trình request và response.
- Cho phép biến đổi dữ liệu trước khi gửi request hoặc sau khi nhận response.
- Cho phép hủy các yêu cầu HTTP bất cứ lúc nào thông qua cancel token.
- Hỗ trợ chuyển đổi dữ liệu tự động sang JSON.
- Bảo vệ client và ứng dụng của bạn trước nguy cơ bị tấn công XSRF.
Một số phương thức của Axios
Dưới đây là một số phương thức hoạt động của Axios mà bạn có thể tham khảo:
Gửi yêu cầu HTTP
Phương thức HTTP được sử dụng phổ biến nhất trong việc khai thác dữ liệu của các ứng dụng web là GET
và POST
. Về cơ bản, sẽ có 2 phương thức cho phép bạn GET
và POST
dữ liệu thông qua Axios, dưới đây là một ví dụ về cách gửi request với phương thức GET
:
axios.get('http://demo.com/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
Sau khi chạy code, sẽ có một request được gửi đến URL http://demo.com/user?ID=12345
với phương thức GET
. Nếu như request này thành công, kết quả sẽ được in ra console trong .then()
. Ngược lại, nếu quá trình này gặp lỗi, lỗi sẽ được in ra console trong .catch()
. Điều này tương tự như việc bạn truy cập vào một đường dẫn từ trình duyệt web, nếu URL hợp lệ thì thông tin sẽ hiển thị trên màn hình, còn không thì sẽ có một thông báo lỗi gửi đến bạn.
Cần lưu ý rằng, query string (tham số truyền vào) có thể được đưa vào như sau:
axios.get('http://demo.com/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
Tiếp theo, chúng ta sẽ đến với ví dụ về cách gửi request với phương thức POST
trong Axios:
axios.post('http://demo.com/user', { name: 'TuandungB', email: 'tuandungb@demo.com', password: '123456' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
Với đoạn code trên, bạn có thể hình dung điều này tương tự với việc bạn đang mở một form tạo mới user để điền các dữ liệu cần thiết, sau đó bấm Gửi.
Cần lưu ý là đoạn code trên chỉ được sử dụng để gửi các request đơn lẻ. Trong trường hợp bạn muốn gửi nhiều request một lúc để lấy các dữ liệu cần thiết, bạn có thể đến với ví dụ dưới đây:
function getAccountInfomation() { return axios.get('/account/12345'); } function getOrderInfomation() { return axios.get('/order/12345'); } axios.all([getAccountInfomation(), getOrderInfomation()]) .then(axios.spread(function (account, order) { // Cả hai yêu cầu được hoàn thành }));
Ví dụ này đang gửi đi 2 request, một request dùng để lấy thông tin tài khoản, còn request còn lại sẽ nhận thông tin về đơn hàng. Trong đó, các phương thức quen thuộc khác như DELETE
, PUT
, PATCH
cũng sẽ được hỗ trợ và điều này đã được thể hiện rõ trong các tài liệu hướng dẫn của Axios.
Trong ví dụ tiếp theo, Vietnix sẽ hướng dẫn bạn cách thêm vào một số thiết lập cấu hình trước khi gửi request HTTP. Thông thường, bạn sẽ ít để ý đến điều này vì trình duyệt thường tự động xử lý một số cài đặt mặc định.
axios(url[, config])
Khi gửi request HTTP với cú pháp trên, bạn có thể thêm các tùy chọn cấu hình trong đối tượng config:
{ // URL đích đến của yêu cầu HTTP url: '/user', // Phương thức gửi yêu cầu có thể là GET, POST, DELETE, PUT... method: 'get', // default // URL cơ sở, nếu bạn có nhiều request đến một server sử dụng URL cơ sở để rút gọn tham số url ở trên // URL cơ sở có thể thiết lập toàn cục để dùng lại sau này. baseURL: 'https://demo.com/api/', // Thay đổi headers object của request. transformRequest: [function (data, headers) { // Thực hiện thay đổi tại đây return data; }], // Thay đổi headers object của phần response transformResponse: [function (data) { // Thực hiện thay đổi tại đây return data; }], // Thiết lập các giá trị cho headers object. headers: {'X-Requested-With': 'XMLHttpRequest'}, // Thêm tham số vào query string params: { ID: 12345 }, // Cũng là tham số nhưng thêm vào body của request data: { firstName: 'Nguyen' }, // Thiết lập thời gian chờ cho xử lý yêu cầu, nếu vượt quá sẽ hủy bỏ yêu cầu HTTP timeout: 1000, // Nhận diện yêu cầu là cross-site Access-Control hay không withCredentials: false, // default // Nhận diện URL có cần xác thực hay không và gửi đi các thông tin để xác thực. auth: { username: 'tuandungb', password: '123456' }, // Nhận diện dạng dữ liệu trả về từ server: arraybuffer, blob, document, json, text, stream responseType: 'json', // mặc định // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token xsrfCookieName: 'XSRF-TOKEN', // default // `xsrfHeaderName` is the name of the http header that carries the xsrf token value xsrfHeaderName: 'X-XSRF-TOKEN', // default // Quản lý tiến trình upload onUploadProgress: function (progressEvent) { // Do whatever you want with the native progress event }, // Quản lý tiến trình download onDownloadProgress: function (progressEvent) { // Do whatever you want with the native progress event }, // Kích thước dữ liệu tối đa hồi đáp từ máy chủ maxContentLength: 2000, // Kiểm tra trạng thái validateStatus: function (status) { return status >= 200 && status < 300; // default }, // Số lần chuyển hướng cho phép khi gọi đến URL, nếu thiết lập 0 là không cho phép maxRedirects: 5, // mặc định // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http httpAgent: new http.Agent({ keepAlive: true }), httpsAgent: new https.Agent({ keepAlive: true }), // Thiết lập proxy proxy: { host: '127.0.0.1', port: 9000, auth: { username: 'tuandungb', password: '123456' } }, // Xác định cancel token sử dụng để hủy bỏ yêu cầu cancelToken: new CancelToken(function (cancel) { }) }
Cấu trúc dữ liệu hồi đáp
Các đối tượng response sau khi được server trả về thường có cấu trúc như sau:
{ // Dữ liệu cần lấy từ máy chủ data: {}, // Mã trạng thái HTTP của yêu cầu status: 200, // Mô tả trạng thái tương ứng với mã trạng thái ở trên statusText: 'OK', // Thông tin header của hồi đáp (response) headers: {}, // config được thiết lập trước khi gửi request config: {}, // là thực thể của ClientRequest nếu sử dụng Node.js và XMLHttpRequest trong trình duyệt request: {} }
Với cấu trúc này, bạn có thể quản lý các thông tin được trả về từ server khi có bất kỳ request HTTP nào gửi đến server đó. Dưới đây là một ví dụ mà bạn có thể tham khảo:
axios.get('http://demo.com/user/12345') .then(function(response) { console.log(response.data); console.log(response.status); console.log(response.statusText); console.log(response.headers); console.log(response.config); });
Kiểm soát lỗi khi request HTTP với Axios
Để cải thiện trải nghiệm người dùng và nâng cao độ linh hoạt cho ứng dụng, bạn cần kiểm soát các lỗi có thể xảy ra khi request HTTP với Axios, kể cả khi đó chỉ là lỗi nhỏ nhất. Dưới đây là một ví dụ:
axios.get('http://demo.com/user/12345') .catch(function (error) { if (error.response) { // Lỗi khi server nhận được request và không xử lý được, các lỗi này có mã lỗi trong dải 2xx console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // Lỗi khi request được tạo ra nhưng server không hồi đáp, khi đó error.request là một thực thể của XMLHttpRequest console.log(error.request); } else { // Lỗi khi thiết lập request console.log('Error', error.message); } console.log(error.config); });
Hủy bỏ yêu cầu
Đây là một chức năng không thể thiếu trên các ứng dụng, nhất là các ứng dụng mua hàng. Chẳng hạn như khi người dùng muốn thay đổi số lượng sản phẩm sau khi lỡ tay click vào nút gửi đơn hàng, chức năng hủy bỏ yêu cầu sẽ hỗ trợ họ thực hiện điều này.
var CancelToken = axios.CancelToken; var source = CancelToken.source(); axios.post('http://demo.com/order', { data: { 'product_id': 234, 'quantity': 3 }, cancelToken: source.token }).catch(function(thrown) { if (axios.isCancel(thrown)) { console.log('Hủy bỏ yêu cầu', thrown.message); } else { // Quản lý lỗi ở đây } }); // Người dùng muốn hủy yêu cầu tạo đơn hàng mới source.cancel('Hủy yêu cầu tạo đơn hàng mới.');
Hook API
Khi gửi một request, đôi khi người dùng sẽ muốn thực hiện một số công việc trong quá trình gửi hoặc ngay khi nhận kết quả phản hồi. Chẳng hạn như bạn muốn nhìn thấy một thanh trạng thái cho biến tiến độ công việc đang thực hiện dưới dạng phần trăm để nắm bắt thời điểm gửi và nhận response. Lúc này, bạn có thể sử dụng Hook API
hoặc Interceptor
để làm được điều trên. Với Axios, chúng ta có đoạn mã kết hợp với thư viện nprogress sau:
axios.interceptors.request.use(function (config) { NProgress.start(); return config; }, function (error) { return Promise.reject(error); }); axios.interceptors.response.use(function (response) { NProgress.done(); return response; }, function (error) { return Promise.reject(error); });
Ví dụ về việc xây dựng ứng dụng với Axios
Trong bối cảnh mà các ứng dụng xử lý và hiển thị tin tức ngày càng phổ biến và cần thiết, Axios đã trở thành một trong những giải pháp hàng đầu giúp tối ưu hóa quá trình lấy dữ liệu JSON từ các API.
So với các nền tảng tương tự như Fetch API, Axios cũng được ưa chuộng hơn bởi cú pháp gọn nhẹ, lại hỗ trợ đầy đủ các request HTTP bất động bộ và cung cấp đa dạng tính năng hữu ích như interceptors, transform response, data… Đặc biệt, thư viện này còn có khả năng xử lý Asynchronous (bất đồng bộ) hiệu quả, góp phần nâng cao tốc độ phản hồi của ứng dụng một cách hiệu quả.
Dưới đây là ví dụ về cách sử dụng Axios để nhận kết quả là danh sách bài viết mới nhất từ API của VnExpress:
axios.get('https://api.vnexpress.net/rss/tin-moi-nhat.rss') .then(response => { const data = response.data; // Xử lý dữ liệu RSS và hiển thị các bài viết lên giao diện }) .catch(error => { console.error('Lỗi khi lấy dữ liệu:', error); });
Câu hỏi thường gặp
Interceptor Axios là gì?
Interceptor Axios là một tính năng mạnh mẽ được tích hợp trong Axios với mục đích quản lý và kiểm soát các giao tiếp HTTP của ứng dụng. Nói cách khác, Interceptor tựa như một bộ lọc hiệu quả, sẽ chặn các request gửi đi và response trả về từ server một cách hiệu quả. Hiện nay, Axios cung cấp 2 loại interceptor phổ biến là Request Interceptor cho phép bạn chỉnh sửa các request trước khi gửi đi và Response Interceptor cho phép xử lý response trước khi được trả về.
Axios React là gì?
Axios React là một thư viện promise-based được sử dụng để tiếp nhận và thực hiện các yêu cầu HTTP trong React. So với XMLHttpRequest mặc định của trình duyệt web, Axios React có cú pháp đơn giản và dễ đọc hơn rất nhiều. Đặc biệt, Axios còn hỗ trợ hầu hết các phương thức HTTP phổ biến như GET, POST, PUT, DELETE trong quá trình tương tác với API RESful.
Với sự phát triển của các framework JavaScript hiện đại, vai trò của Axios có còn quan trọng không? Tại sao?
Mặc cho sự phát triển vượt bậc của framework JavaScript như React, Angular, Vue.js khiến cho việc tích hợp các phương thức yêu cầu HTTP như fetch API đã dần trở nên phổ biến, Axios vẫn đóng vai trò quan trọng nhất định bởi hàng loạt ưu điểm nổi bật như cú pháp đơn giản, dễ đọc, xử lý request bất đồng bộ hiệu quả với Promise-based, tích hợp nhiều tính năng hữu ích như interceptor, transform data, hủy request… Từ đó, Axios mang lại sự linh hoạt, khả năng tùy chỉnh và quản lý request tốt nhất cho người dùng.
Lời kết
Bên trên là câu trả lời cho thắc mắc Axios là gì và cách xây dựng ứng dụng dựa trên Axios. Có thể nói rằng, đây là một trong những thư viện JavaScript hữu ích nhất mà nhà phát triển có thể sử dụng trong quá trình xây dựng ứng dụng web của mình. Ngoài ra, đừng quên chia sẻ bài viết để mọi người cùng tham khảo và đón đọc, bạn nhé!