Thư viện Axios

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