Sử dụng Axios để gọi HTTP request trong Javascript – chưa bao giờ đơn giản hơn!

Giới thiệu

Axios là thư viện JavaScript thông dụng giúp bạn có thể thự hiện các request HTTP một cách dễ dàng. Có thể hoạt động trên cả hai platform Browser và Node.js

Hỗ trợ tất cả browsers hiện đại, bao gồm cả IE8 và cao hơn.

Thư viện thuộc dạng promise-based, và bạn có thể viết code async/await để thực hiện request XHR một cách dễ dàng.

Sử dụng Axios có một vài lợi thế hơnFetch API:

• supports các browser cũ
• có cách để hủy request
• có cách để set timeout response
• được build để chống CSRF
• support upload progress
• thực hiện chuyển đội dữ liệu JSON một cách tự động
• hoạt động trên Node.js

Installation

Axios có thể cài đặt thông qua npm:

npm install axios

hoặc  yarn:

yarn add axios

hoặc đơn giản chỉ là nhúng src script thông qua unpkg.com:

https://unpkg.com/axios/dist/axios.min.js

The Axios API

Bạn có thể gọi request HTTP từ đối tượng axios

axios({
  url: 'https://dog.ceo/api/breeds/list/all',
  method: 'get',
  data: {
    foo: 'bar'
  }
})

nhưng để tiện hơn, bạn thường sẽ sử dụng

• axios.get()
• axios.post()

(giống như trong jQuery, bạn sẽ sử dụng $.get() và $.post() thay vì $.ajax())

Axios cung cấp phương thức cho tất cả HTTP verbs, tuy ít phổ biến những vẫn được sử dụng:

• axios.delete()
• axios.put()
• axios.patch()
• axios.options()

Nó cũng cung cấp phương thức để get HTTP headers từ request.

GET requests

Một cách thuận tiện nhất để dùng Axios là sử dụng syntax async/await (ES2017).

Ví dụ Node.js này sẽ queries đếnDog API  để lấy toàn bộ danh sách các giống chó, sử dụngaxios.get(), và đếm chúng:

const axios = require('axios')

const getBreeds = async () => {
  try {
    return await axios.get('https://dog.ceo/api/breeds/list/all')
  } catch (error) {
    console.error(error)
  }
}

const countBreeds = async () => {
  const breeds = await getBreeds()

  if (breeds.data.message) {
    console.log(`Got ${Object.entries(breeds.data.message).length} breeds`)
  }
}

countBreeds()

Nếu bạn không muốn sử dụng async/wait, bạn có thể dùng syntax Promises:

const axios = require('axios')

const getBreeds = () => {
  try {
    return axios.get('https://dog.ceo/api/breeds/list/all')
  } catch (error) {
    console.error(error)
  }
}

const countBreeds = async () => {
  const breeds = getBreeds()
    .then(response => {
      if (response.data.message) {
        console.log(
          `Got ${Object.entries(response.data.message).length} breeds`
        )
      }
    })
    .catch(error => {
      console.log(error)
    })
}

countBreeds()

Thêm param vào request Get

Phương thức GET có thể chứa tham số trong URL, chẳng hạn như: https://site.com/?foo=bar.

Với Axios bạn có thể thực hiện hàm gọi đơn giản như sau:

axios.get('https://site.com/?foo=bar')

hoặc bạn có thể sử dụng thuộc tính params trong options:

axios.get('https://site.com/', {
  params: {
    foo: 'bar'
  }
})

POST Requests

Thực hiện POST request cũng giống như GET request, nhưng thay vì dùng axios.get, bạn sẽ dùng axios.post:

axios.post('https://site.com/')

Và đối tượng có thể chứa thêm tham số POST

axios.post('https://site.com/', { foo: 'bar' })

Một chút thủ thuật nhỏ hy vọng sẽ giúp ích cho các bạn !

Y Sa

Nguồn: https://medium.freecodecamp.org/simple-http-requests-in-javascript-using-axios-272e1ac4a916