Computer >> Hướng Dẫn Máy Tính >  >> Phần Mềm >> Các Trình Duyệt

Đơn Giản Hóa Yêu Cầu HTTP Trong JavaScript Với Axios: Hướng Dẫn Chuyên Nghiệp

Quan tâm học JavaScript? Tải ebook tại jshandbook.com

Giới Thiệu

Axios là thư viện JavaScript rất phổ biến dùng để thực hiện yêu cầu HTTP. Nó hoạt động trên cả Browser và Node.js.

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

Nó dựa trên promise (promise-based), và điều này cho phép chúng ta viết mã async/await để thực hiện yêu cầu XHR rất dễ dàng.

Sử dụng Axios có khá nhiều ưu điểm so với Fetch API gốc:

  • hỗ trợ trình duyệt cũ (Fetch cần polyfill)
  • có cách hủy yêu cầu (abort request)
  • có cách đặt timeout phản hồi
  • có bảo vệ CSRF tích hợp sẵn
  • hỗ trợ tiến trình tải lên (upload progress)
  • 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ài bằng npm:

npm install axios

hoặc yarn:

yarn add axios

hoặc đơn giản nhúng vào trang qua unpkg.com:

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

API Của Axios

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

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

nhưng để tiện lợi, bạn thường dùng

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

(giống như jQuery, bạn dùng $.get() và $.post() thay vì $.ajax())

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

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

Nó cũng cung cấp phương thức lấy header HTTP của yêu cầu, loại bỏ phần body.

Yêu Cầu GET

Một cách tiện lợi dùng Axios là dùng cú pháp async/await hiện đại (ES2017).

Ví dụ Node.js này truy vấn Dog API để lấy danh sách tất cả giống chó, dùng axios.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 không muốn dùng async/await, bạn có thể 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 Tham Số Vào Yêu Cầu GET

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

Với Axios bạn có thể làm điều này bằng cách đơn giản dùng URL đó:

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

hoặc dùng thuộc tính params trong options:

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

Yêu Cầu POST

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

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

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

axios.post('https://site.com/', { foo: 'bar' })
Quan tâm học JavaScript? Tải ebook tại jshandbook.com