Thư Viện Axios - Hapolog

Axios là gì?

Axios là một HTTP client dựa trên promise cho node.js và trình duyệt. Ở phía máy chủ nó sử dụng http module của nodejs, còn bên phía người dùng nó sử dụng XMLHttpRequests.

Cài đặt

Sử dụng npm : $ npm install axios

Sử dụng bower:  $ bower install axios

Sử dụng yarn : $ yarn add axios

Sử dụng jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Sử dụng unpkg CDN:

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

Cấu hình

{ // `url` là đường dẫ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 thêm vào trước url khi url là đường dẫn tuyệt đối. //Có thể thuận tiện khi đặt `baseURL` cho một phiên bản của axios để chuyển các URL tương đối // tới các phương thức của phiên bản đó. 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' }, //Cách thay thế để gửi dữ liệu vào nội dung, chỉ có giá trị được gửi không bao gồm key data: 'Country=Brasil&City=Belo Horizonte', // `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\ // `auth` chỉ rằng HTTP Basic auth nên được sử dụng và cung cấp thông tin đăng nhập // Thao tác này sẽ đặt tiêu đề `Authorization`, ghi đè lên bất kỳ tiêu đề có thể tuỳ chỉnh // Đối với mã Bearer nên sử dụng tuỳ chỉnh của Auth auth: { username: 'janedoe', password: 's00pers3cret' }, // `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 // `responseEncoding` cho biết mã hóa để sử dụng cho các phản hồi giải mã (chỉ Node.js) // Lưu ý: Bị bỏ qua đối với` responseType` của 'stream' hoặc các yêu cầu phía máy khách responseEncoding : 'utf8' , // default // `xsrfCookieName` là tên của cookie được sử dụng như giá trị của xsrf token xsrf xsrfCookieName: 'XSRF-TOKEN', // mặc định là 'XSRF-TOKEN' // `xsrfHeaderName` là tên của header mang giá trị của xsrf token xsrf 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) { }) }

Các phương thức request

Các phương thức trong phiên bản mới được liệt kê ở dưới:

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]]) axios # getUri ([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.

Phương thức cơ bản

Phương thức GET

// Phương thức GET axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

Phương thức POST

//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 phương thức

function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } Promise.all([getUserAccount(), getUserPermissions()]) .then(function (results) { const acct = results[0]; const perm = results[1]; });

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ụ:

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

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: {} }

Tổng kết

Đây là phần giới thiệu cơ bản của thư viện axios hi vọng có thể giúp đỡ mọi người tiếp cận với thư viện này.

Tài liệu tham khảo

https://www.npmjs.com/package/axios