axios la gi

Giới thiệu

Axios là gì? Axios là 1 trong tủ sách HTTP Client dựa vào Promise. Cơ phiên bản thì nó hỗ trợ một API mang đến việc xử lý XHR (XMLHttpRequests). Trong nội dung bài viết này, tất cả chúng ta tiếp tục lần hiểu thực hiện thế này nhằm triển khai một HTTP request bằng phương pháp dùng axios nhé.

Cài đặt

Để dùng được axios thì trước tiên, bạn phải thiết lập nó. Có vài ba phương pháp để triển khai điều này:

Bạn đang xem: axios la gi

• 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 hoàn toàn có thể được đưa đến bằng phương pháp chỉ định và hướng dẫn những config tương thích mang đến axios. Các options của config như sau:

{
  // `url` là đích cho tới của request
  url: '/user',

  // `method` là công thức được dùng nhằm triển khai request
  method: 'get', // đem lăm le là GET

  // `baseURL` sẽ tiến hành gán nhập trước url khi url là đường đi kha khá.
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` được cho phép thay cho thay đổi tài liệu trước lúc trình lên server
  // Option này chỉ khả dụng cho những request đem công thức là 'PUT', 'POST', và 'PATCH'
  // Hàm sau cuối cần trả về luôn tiện hiện tại của Buffer hoặc ArrayBuffer hoặc FormData hoặc Stream
  // quý khách cũng hoàn toàn có thể thay cho thay đổi header của request ở phía trên.
  transformRequest: [function (data, headers) {
    // Thực hiện tại thay cho thay đổi dữ liệu

    return data;
  }],

  // `transformResponse` được cho phép thay cho thay đổi tài liệu trả về trước lúc nhập hàm xử lý nhập then/catch
  transformResponse: [function (data) {
    // Thực hiện tại việc thay cho thay đổi dữ liệu

    return data;
  }],

  // `headers` là những header được bịa lại trước lúc trình lên server
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` là những thông số URL sẽ tiến hành trình lên nằm trong request
  // Giá trị của chính nó cần là 1 trong object thuần hoặc là 1 trong đối tượng người tiêu dùng URLSearchParams
  params: {
    ID: 12345
  },

  // `paramsSerializer` là 1 trong hàm tùy lựa chọn, đem trách nhiệm là serialize `params`
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data` là tài liệu sẽ tiến hành gửi theo đòi body toàn thân của request
  // Chỉ khả dụng cho những request đem công thức là 'PUT', 'POST', và 'PATCH'
  // Khi ko thiết lập `transformRequest`, data cần nằm trong một trong những loại sau:
  // - Chuỗi, object thuần, ArrayBuffer, ArrayBufferView, URLSearchParams, FormData, File, Blob, Stream, Buffer
  data: {
    firstName: 'Fred'
  },

  // `timeout` chỉ định và hướng dẫn số mili giây khi request vượt lên quá thời hạn truy vấn và bị diệt bỏ
  timeout: 1000,

  // `withCredentials` chỉ định và hướng dẫn đem triển khai những request cross-site Access-Control dùng credential hoặc không
  withCredentials: false, // đem lăm le là false

  // `responseType` chỉ định và hướng dẫn loại tài liệu tuy nhiên server tiếp tục trả về
  // hoàn toàn có thể là 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default

  // `xsrfCookieName` là tên gọi của cookie được dùng như độ quý hiếm của xsrf token
  xsrfCookieName: 'XSRF-TOKEN', // đem lăm le là 'XSRF-TOKEN'

  // `xsrfHeaderName` là tên gọi của header đem độ quý hiếm của xsrf token
  xsrfHeaderName: 'X-XSRF-TOKEN', // đem lăm le là 'X-XSRF-TOKEN'

  // `onUploadProgress` được cho phép xử lý quy trình upload
  onUploadProgress: function (progressEvent) {
    // Thực hiện tại việc thao tác với việc khiếu nại progress
  },

  // `onDownloadProgress` được cho phép xử lý quy trình download
  onDownloadProgress: function (progressEvent) {
    // Thực hiện tại việc thao tác với việc khiếu nại progress
  },

  // `maxContentLength` chỉ định và hướng dẫn phỏng nhiều năm tối nhiều tuy nhiên response được trả về
  maxContentLength: 2000,

  // `validateStatus` chỉ định và hướng dẫn việc xử lý hoặc kể từ chối promise với HTTP response status được đem ra
  validateStatus: function (status) {
    return status >= 200 && status < 300; // trả về true hoặc null hoặc undefined thì tiếp tục xử lý, ko thì tiếp tục kể từ chối
  },

  // `cancelToken` chỉ định và hướng dẫn một cancel token được dùng để làm diệt request
  cancelToken: new CancelToken(function (cancel) {
  })
}

Thực hiện tại request với công thức GET

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

Đoạn code bên trên tương tự 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 tại request với cô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 tại nhiều truy vấn đồ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 và được triển khai xong
}));

Các alias mang đến việc đưa đến những request với cô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 dùng những alias này thì url, method, và data ko cần rất cần phải chỉ định và hướng dẫn nhập config nữa.

Xem thêm: dụ hôn vô tận tương tư

Tạo đi ra một đối tượng người tiêu dùng axios

Bạn hoàn toàn có thể đưa đến một đối tượng người tiêu dùng axios với những config của tôi vị hàm axios.create([config]) Ví dụ:

Xem thêm: truyện con đường bá chủ truyenfull

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

Khi cơ, đối tượng người tiêu dùng này hoàn toàn có thể dùng những công thức sau nhằm triển khai 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 tài liệu trả về

Dữ liệu trả về cho 1 request tiếp tục đem những vấn đề sau:

{
  // `data` là tài liệu trả về được hỗ trợ vị server
  data: {},

  // `status` là mã HTTP status trả về kể từ server
  status: 200,

  // `statusText` là thông điệp HTTP status trả về kể từ server
  statusText: 'OK',

  // `headers` là những header tuy nhiên server phản hồi
  // Các thương hiệu của header được ghi chép thông thường toàn bộ
  headers: {},

  // `config` là những thông số kỹ thuật khi triển khai request
  config: {},

  // `request` là request triển khai nhằm cảm nhận được response này
  request: {}
}

response được xem là thông số của hàm được truyền nhập then.