VueJS: Cơ Bản Về Axios | V1Study

1. Cơ bản về Axios

1.1 Axios là gì?

Axios là một HTTP client được phát triển trên đối tượng Javascript Promise, nó có thể sử dụng trong các ứng dụng font-end Vue.js, React, Angular… Sử dụng Axios dễ dàng gửi đi các request HTTP bất đồng bộ đến các REST endpoint và thực hiện các chức năng CRUD.

Chúng ta cần có một số khái niệm sau:

• HTTP client là có thể là phần mềm, thư viện có thể thực hiện các yêu cầu (request) dạng HTTP đến máy chủ HTTP và nhận về các hồi đáp (reponse). Đơn giản hơn bạn có thể coi nó gần với một trình duyệt web.
• Javascript Promise là một đối tượng giúp kiểm soát kết quả hoàn thành hay thất bại của một hành động bất đồng bộ trong Javascript (tham khảo thêm Kiến thức về Javascript Promise).
• Vue.js, React, Angular là những framework Javascript hiện đang rất hot, giúp xây dựng những ứng dụng font-end linh hoạt hoạt động nhanh và mạnh mẽ.
• REST endpoint là những điểm (URL) cung cấp các chức năng API cho phép chúng ta tương tác với một hệ thống, ví dụ khi chúng ta muốn tương tác với V1Study chúng ta có thể gửi các request HTTP đến các REST API do V1Study cung cấp.
• CRUD viết tắt của Create, Read, Update, Delete là một thuật ngữ lập trình nói đến 4 phương thức quen thuộc khi làm việc với kho dữ liệu.

Tóm lại, Axios là một “trình duyệt” trong Javascript giúp chúng ta thực hiện thao tác với các website hoặc API giúp xây dựng những ứng dụng font-end linh hoạt mạnh mẽ hơn.

1.2 Cài đặt Axios

Thư viện axios có thể cài đặt thông qua công cụ npm:

npm install axios

Hoặc chèn đường dẫn file Javascript trên các CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Nếu bạn sử dụng framework Laravel, thư viện Axios đã được thiết lập sẵn trong file resources\assets\bootstrap.js:

/** * We'll load the axios HTTP library which allows us to easily issue requests * to our Laravel back-end. This library automatically handles sending the * CSRF token as a header based on the value of the "XSRF" token cookie. */ window.axios = require('axios'); window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

và chỉ việc thực hiện npm install để cài đặt các gói đã được thiết lập sẵn.

1.3 Các phương thức của axios

1.3.1 Phương thức gửi yêu cầu HTTP

Các phương thức HTTP thường sử dụng nhiều nhất để khai thác dữ liệu là GET và POST. Axios có hai phương thức để thực hiện GET và POST dữ liệu.

axios.get('http://v1study.com/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

Đoạn mã này gửi một request với phương thức GET đến URL http://v1study.com/user?ID=12345, nếu thành công kết quả sẽ được in ra console trong .then() và nếu lỗi thì in lỗi ra console trong .catch(). Bạn có thể tưởng tượng nó giống như việc bạn mở trình duyệt ra, gõ vào đường dẫn cần đến và chờ, nếu thông tin được hiển thị bạn sẽ đọc được, nếu không một thông báo lỗi hiển thị lên trên trình duyệt. Chú ý, tham số truyền vào (query string) có thể đưa vào phần tham số như sau:

axios.get('http://v1study.com/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

Tiếp theo chúng ta xem gửi dữ liệu với phương thức POST đến một URL như thế nào:

axios.post('http://v1study.com/user', { name: 'FirebirD', email: 'firebird@allaravel.com', password: '123456' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

Đoạn code trên thực hiện giống như chúng ta mở một form tạo mới user, nhập các dữ liệu vào và nhấn nút Gửi. Trên đây chúng ta gửi đi các yêu cầu đơn lẻ, nếu như muốn cùng một lúc gửi nhiều các yêu cầu lấy dữ liệu thì sao? Ví dụ tiếp theo gửi đi hai yêu cầu, một để lấy thông tin tài khoản, một để lấy thông tin đơn hàng.

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 }));

Các phương thức khác như DELETE, PUT, PATCH cũng được hỗ trợ. Bạn có thể tham khảo thêm trong tài liệu Axios. Tiếp theo, chúng ta sẽ tìm hiểu cách thức đưa thêm các thiết lập cấu hình trước khi gửi đi yêu cầu HTTP (với trình duyệt thường nó ngầm định nên bạn không để ý đến).

axios(url[, config])

Các yêu cầu HTTP có thể gửi đi bằng cú pháp ở trên, có thể truyền vào các cấu hình trong đối tượng config như sau:

{ // 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://allaravel.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: 'Fred' }, // 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: 'janedoe', password: 's00pers3cret' }, // 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: 'mikeymike', password: 'rapunz3l' } }, // Xác định cancel token sử dụng để hủy bỏ yêu cầu cancelToken: new CancelToken(function (cancel) { }) }

1.3.2 Cấu trúc dữ liệu hồi đáp

Đối tượng response được trả về từ server 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, khi một request HTTP được gửi đến server chúng ta có thể quản lý được các thông tin trả về từ server, hãy xem ví dụ sau:

axios.get('http://v1study.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); });

1.3.3 Hook API

Trong quá trình gửi đi một yêu cầu, ngay trước khi gửi chúng ta có thể mong muốn thực hiện một số công việc hoặc ngay khi nhận được response cũng vậy. Ví dụ thực thế, nếu bạn muốn là một thanh trạng thái hiển thị phần trăm công việc đang thực hiện, bạn cần biết các thời điểm ngay khi gửi request và ngay khi nhận được response. Có thể sử dụng các thuật ngữ như Hook API hoặc Interceptor cho những gì mô tả ở trên. Với axios bạn tham khảo đoạn mã dưới đây kết hợp với thư viện nprogress:

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); });

1.3.4 Kiểm soát lỗi khi gửi yêu cầu HTTP với Axios

Kiểm soát lỗi chi tiết là rất cần thiết, với từng lỗi cụ thể chúng ta sẽ có những xử lý riêng biệt tăng cường trải nghiệm người dùng với sự linh hoạt của ứng dụng:

axios.get('http://v1study.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); });

1.3.5 Hủy bỏ một yêu cầu

Hủy bỏ yêu cầu là một chức năng cần thiết, bạn tưởng tượng người dùng click vào nút gửi đơn hàng và mỗi đơn hàng xử lý trong 10 giây, tuy nhiên ngay sau khi click người dùng lại muốn hủy bỏ yêu cầu để sửa lại đơn hàng này với số lượng sản phẩm nhiều hơn, như vậy hủy bỏ yêu cầu là rất cần thiết.

var CancelToken = axios.CancelToken; var source = CancelToken.source(); axios.post('http://allaravel.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.');

2. Tại sao dùng Axios?

Hiện tại có rất nhiều các HTTP Client dạng Javascript có thể kể đến ngoài Axios như việc sử dụng jQuery, phương thức fetch() được hỗ trợ từ ES6, SuperAgent, Qwest… Tuy nhiên Axios có nhiều ưu điểm như sau:

• Axios xây dựng dựa trên nền tảng Promise do đó nó kế thừa các ưu điểm của Promise.
• Cho phép thực hiện các hook (intercept) ngay khi gửi request và nhận response.
• Cho phép hủy yêu cầu, đây là một chức năng mà các thư viện khác không có.