Yêu cầu HTTP bằng Axios

Axios là một thư viện JavaScript rất phổ biến mà bạn có thể sử dụng để thực hiện các yêu cầu HTTP, hoạt động trên cả hai nền tảng Trình duyệt và Node.js

Giới thiệu về Axios

Axios là một thư viện JavaScript rất phổ biến mà bạn có thể sử dụng để thực hiện các yêu cầu HTTP, hoạt động trong cả Trình duyệt vàNode.jsnền tảng.

Nó hỗ trợ tất cả các trình duyệt hiện đại, bao gồm hỗ trợ cho IE8 trở lên.

Nó dựa trên lời hứa và điều này cho phép chúng tôi viết mã không đồng bộ / chờ đợi để thực hiệnXHRyêu cầu rất dễ dàng.

Sử dụng Axios có khá nhiều lợi thế so với bản gốcAPI tìm nạp:

  • hỗ trợ các trình duyệt cũ hơn (Tìm nạp cần một polyfill)
  • có một cách để hủy bỏ một yêu cầu
  • có một cách để đặt thời gian chờ phản hồi
  • có bảo vệ CSRF tích hợp
  • hỗ trợ tiến trình tải lên
  • thực hiện tự độngJSONchuyển đổi dữ liệu
  • hoạt động trong Node.js

Một video hướng dẫn

Xem video này, nơi tôi tạo máy chủ Express cung cấp điểm cuối POST và tôi thực hiện yêu cầu Axios đối với nó, để đăng dữ liệu:


Cài đặt

Axios có thể được cài đặt để sử dụng trong Node.js bằng cách sử dụngnpm:

npm install axios

Trong trình duyệt, bạn có thể đưa nó vào trang của mình bằng cách sử dụng unkg.com:

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

Ghi nhớ rằng các lệnh gọi API phải bậtCORSđược truy cập bên trong trình duyệt, nếu không yêu cầu sẽ không thành công.

API Axios

Bạn có thể bắt đầu một yêu cầu HTTP từaxiosvật:

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

Điều này trả về mộtlời hứa. Bạn có thể sử dụng async / await để giải quyết lời hứa đó với đối tượng phản hồi:

;(async () => {
  const response = await axios({
    url: 'https://dog.ceo/api/breeds/list/all',
    method: 'get'
  })

console.log(response) })()

Để thuận tiện, bạn sẽ thường sử dụng các phương pháp

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

Đối với những người cũ, như trong jQuery, bạn sẽ sử dụng$.get()$.post()thay vì$.ajax()

Họ cung cấp một cú pháp đơn giản hơn. Ví dụ:

;(async () => {
  const response = await axios.get('https://dog.ceo/api/breeds/list/all')
  console.log(response)
})()

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

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

và một phương thức để lấy các tiêu đề HTTP của một yêu cầu, loại bỏ phần thân,axios.head().

NHẬN yêu cầu

Ví dụ Node.js này truy vấnAPI chóđể truy xuất danh sách tất cả các giống chó, sử dụngaxios.get()và nó tính 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 </span><span style="color:#e6db74">${</span>Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">breeds</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>).<span style="color:#a6e22e">length</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> breeds) } }

countBreeds()

Nếu bạn không muốn sử dụng async / await, bạn có thể sử dụngLời hứacú pháp:

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 </span><span style="color:#e6db74">${</span>Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">response</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>).<span style="color:#a6e22e">length</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> breeds ) } }) .catch(error => { console.log(error) }) }

countBreeds()

Thêm thông số vào yêu cầu GET

Phản hồi GET có thể chứa các tham số trong URL, như sau:https://site.com/?name=Flavio.

Với Axios, bạn có thể thực hiện việc này bằng cách sử dụng URL đó:

axios.get('https://site.com/?name=Flavio')

hoặc bạn có thể sử dụng mộtparamstài sản trong các tùy chọn:

axios.get('https://site.com/', {
  params: {
    name: 'Flavio'
  }
})

ĐĂNG yêu cầu

Thực hiện yêu cầu ĐĂNG giống như thực hiện yêu cầu GET, nhưng thay vìaxios.get, bạn dùngaxios.post:

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

Một đối tượng chứa các tham số POST là đối số thứ hai:

axios.post('https://site.com/', {
  name: 'Flavio'
})

Tải xuống miễn phí của tôiSổ tay Node.js


Các hướng dẫn nút khác: