Computer >> Máy Tính >  >> Phần mềm >> Các trình duyệt

Yêu cầu HTTP đơn giản trong JavaScript sử dụng Axios

Bạn quan tâm đến việc học JavaScript? Nhận ebook của tôi tại jshandbook.com

Giới thiệu

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. Nó hoạt động trên cả hai nền tảng Trình duyệt và Node.js.

Hỗ trợ tất cả các trình duyệt hiện đại, bao gồm 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ã async / await để thực hiện các yêu cầu XHR rất dễ dàng.

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

  • 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ỏ yêu cầu
  • có một cách để đặt thời gian chờ phản hồi
  • có tính năng bảo vệ CSRF được tích hợp sẵn
  • hỗ trợ tiến trình tải lên
  • thực hiện chuyển đổi dữ liệu JSON tự động
  • hoạt động trong Node.js

Cài đặt

Axios có thể được cài đặt bằng npm:

npm install axios

hoặc sợi:

yarn add axios

hoặc chỉ cần đưa nó vào trang của bạn bằng cách sử dụng unkg.com:

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

API Axios

Bạn có thể bắt đầu một yêu cầu HTTP từ axios đối tượng:

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

nhưng để thuận tiện, bạn sẽ thường 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 các phương thức cho tất cả các động từ HTTP, các động từ này ít phổ biến hơn nhưng vẫn được sử dụng:

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

Nó cũng cung cấp một phương thức để lấy tiêu đề HTTP của một yêu cầu, loại bỏ phần thân.

NHẬN yêu cầu

Một cách thuận tiện để sử dụng Axios là sử dụng cú pháp async / await hiện đại (ES2017).

Ví dụ Node.js này truy vấn API Dog để truy xuất danh sách tất cả các giống chó, sử dụng axios.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 ${Object.entries(breeds.data.message).length} breeds`)  }}countBreeds()

Nếu bạn không muốn sử dụng async / await, bạn có thể sử dụng cú pháp 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 thông số vào GET yêu cầu

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

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/?foo=bar')

hoặc bạn có thể sử dụng params thuộc tính trong các tùy chọn:

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

ĐĂ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 sử dụng axios.post :

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

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

axios.post('https://site.com/', { foo: 'bar' })
Bạn quan tâm đến việc học JavaScript? Nhận ebook của tôi tại jshandbook.com