Giới thiệu

Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise. Cơ bản thì nó cung cấp một API cho việc xử lý XHR (XMLHttpRequests). Trong bài viết này, chúng ta sẽ tìm hiểu làm thế nào để thực hiện một HTTP request bằng cách sử dụng axios nhé.

Cài đặt

Để sử dụng được axios thì trước tiên, bạn cần cài đặt nó. Có vài cách để thực hiện điều này:

• Sử dụng npm: $ npm install --save axios
• Sử dụng bower: $ bower install axios
• Sử dụng CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios API

Các request có thể được tạo ra bằng cách chỉ định các config thích hợp cho axios. Các options của config như sau:

{ // `url` là đích đến của request url: '/user', // `method` là phương thức được sử dụng để thực hiện request method: 'get', // mặc định là GET // `baseURL` sẽ được gán vào trước url khi url là đường dẫn tương đối. baseURL: 'https://some-domain.com/api/', // `transformRequest` cho phép thay đổi dữ liệu trước khi gửi lên server // Option này chỉ khả dụng cho các request có phương thức là 'PUT', 'POST', và 'PATCH' // Hàm cuối cùng phải trả về một thể hiện của Buffer hoặc ArrayBuffer hoặc FormData hoặc Stream // Bạn cũng có thể thay đổi header của request ở đây. transformRequest: [function (data, headers) { // Thực hiện thay đổi dữ liệu return data; }], // `transformResponse` cho phép thay đổi dữ liệu trả về trước khi vào hàm xử lý trong then/catch transformResponse: [function (data) { // Thực hiện việc thay đổi dữ liệu return data; }], // `headers` là các header được đặt lại trước khi gửi lên server headers: {'X-Requested-With': 'XMLHttpRequest'}, // `params` là các tham số URL sẽ được gửi lên cùng request // Giá trị của nó phải là một object thuần hoặc là một đối tượng URLSearchParams params: { ID: 12345 }, // `paramsSerializer` là một hàm tùy chọn, có nhiệm vụ là serialize `params` paramsSerializer: function(params) { return Qs.stringify(params, {arrayFormat: 'brackets'}) }, // `data` là dữ liệu sẽ được gửi theo body của request // Chỉ khả dụng cho các request có phương thức là 'PUT', 'POST', và 'PATCH' // Khi không cài đặt `transformRequest`, data phải thuộc một trong các kiểu sau: // - Chuỗi, object thuần, ArrayBuffer, ArrayBufferView, URLSearchParams, FormData, File, Blob, Stream, Buffer data: { firstName: 'Fred' }, // `timeout` chỉ định số mili giây khi request vượt quá thời gian truy cập và bị hủy bỏ timeout: 1000, // `withCredentials` chỉ định có thực hiện các request cross-site Access-Control sử dụng credential hay không withCredentials: false, // mặc định là false // `responseType` chỉ định kiểu dữ liệu mà server sẽ trả về // có thể là 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' responseType: 'json', // default // `xsrfCookieName` là tên của cookie được sử dụng như giá trị của xsrf token xsrfCookieName: 'XSRF-TOKEN', // mặc định là 'XSRF-TOKEN' // `xsrfHeaderName` là tên của header mang giá trị của xsrf token xsrfHeaderName: 'X-XSRF-TOKEN', // mặc định là 'X-XSRF-TOKEN' // `onUploadProgress` cho phép xử lý quá trình upload onUploadProgress: function (progressEvent) { // Thực hiện việc thao tác với sự kiện progress }, // `onDownloadProgress` cho phép xử lý quá trình download onDownloadProgress: function (progressEvent) { // Thực hiện việc thao tác với sự kiện progress }, // `maxContentLength` chỉ định độ dài tối đa mà response được trả về maxContentLength: 2000, // `validateStatus` chỉ định việc xử lý hay từ chối promise với HTTP response status được đưa ra validateStatus: function (status) { return status >= 200 && status < 300; // trả về true hay null hay undefined thì sẽ xử lý, không thì sẽ từ chối }, // `cancelToken` chỉ định một cancel token được dùng để hủy request cancelToken: new CancelToken(function (cancel) { })
}

Thực hiện request với phương thức GET

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

Đoạn code trên tương đương với config như sau:

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

Thực hiện request với phương thức POST

axios.post('/users', { firstName: 'First name', lastName: 'Last name'
})
.then(function (response) { console.log(response);
})
.catch(function (error) { console.log(error);
});

Thực hiện nhiều truy cập đồng thời

function getUserAccount() { return axios.get('/user/12345');
} function getUserPermissions() { return axios.get('/user/12345/permissions');
} axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) { // Tất cả request đều đã được thực hiện xong
}));

Các alias cho việc tạo ra các request với phương thức tương ứng

• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.options(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

Khi sử dụng các alias này thì url, method, và data không phải cần phải chỉ định trong config nữa.

Tạo ra một đối tượng axios

Bạn có thể tạo ra một đối tượng axios với các config của mình bằng hàm axios.create([config]) Ví dụ:

var instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'}
});

Khi đó, đối tượng này có thể sử dụng các phương thức sau để thực hiện việc gửi request:

• axios#request(config)
• axios#get(url[, config])
• axios#delete(url[, config])
• axios#head(url[, config])
• axios#options(url[, config])
• axios#post(url[, data[, config]])
• axios#put(url[, data[, config]])
• axios#patch(url[, data[, config]])

Cấu trúc của dữ liệu trả về

Dữ liệu trả về cho một request sẽ mang các thông tin sau:

{ // `data` là dữ liệu trả về được cung cấp bởi server data: {}, // `status` là mã HTTP status trả về từ server status: 200, // `statusText` là thông điệp HTTP status trả về từ server statusText: 'OK', // `headers` là các header mà server phản hồi // Các tên của header được viết thường toàn bộ headers: {}, // `config` là các cấu hình khi thực hiện request config: {}, // `request` là request thực hiện để nhận được response này request: {}
}

response sẽ là tham số của hàm được truyền vào then.