Computer >> Máy Tính >  >> Lập trình >> Javascript

Cách thực hiện các yêu cầu GET và POST của axios

Khi bạn đang xây dựng một ứng dụng web, có thể có lúc bạn muốn thực hiện một yêu cầu HTTP để truy cập tài nguyên bên ngoài. Ví dụ, giả sử bạn đang tạo một blog. Bạn có thể muốn gọi một API để truy xuất danh sách các nhận xét để hiển thị trên mỗi bài đăng blog.

Axios là một thư viện JavaScript phổ biến mà bạn có thể sử dụng để thực hiện các yêu cầu web. Trong hướng dẫn này, chúng tôi sẽ giải thích cách sử dụng axios để thực hiện yêu cầu GET. Chúng tôi sẽ giới thiệu cho các bạn một vài ví dụ để giới thiệu cách hoạt động của axios và cách bạn có thể sử dụng nó trong mã của mình.

Tại sao lại là Axios?

Axios là một thư viện dựa trên lời hứa giúp bạn dễ dàng thực hiện các yêu cầu web.

Bạn có thể tự hỏi:tại sao tôi nên sử dụng axios trên một trong nhiều thư viện yêu cầu web khác ngoài kia? Đúng là có những thư viện khác như tìm nạp mà bạn có thể sử dụng để thực hiện các yêu cầu GET, nhưng axios có một số lợi thế mà các thư viện này không có.

Axios hỗ trợ các trình duyệt cũ hơn, cho phép bạn tạo trải nghiệm người dùng dễ tiếp cận hơn. Axios cũng đi kèm với tính năng bảo vệ CSRF tích hợp để ngăn chặn các lỗ hổng. Nó cũng hoạt động trong Node.js, điều này rất tuyệt nếu bạn đang phát triển cả ứng dụng web front-end hoặc back-end.

Cách cài đặt Axios

Trước khi thực hiện yêu cầu GET bằng axios, bạn sẽ phải cài đặt thư viện. Bạn có thể làm như vậy bằng lệnh sau:

npm install axios --save

Lệnh này sẽ cài đặt axios và lưu nó vào tệp package.json cục bộ của bạn. Bây giờ bạn đã sẵn sàng để bắt đầu sử dụng thư viện axios.

Cách đưa ra yêu cầu bằng Axios

Bắt đầu với axios rất đơn giản. Để thực hiện một yêu cầu web, tất cả những gì bạn cần làm là chỉ định URL mà bạn muốn yêu cầu dữ liệu và phương pháp bạn muốn sử dụng.

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

Giả sử bạn muốn truy xuất danh sách các dữ kiện ngẫu nhiên về mèo từ API thông tin về mèo. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:

axios ({
	url: "https://cat-fact.herokuapp.com/facts",
	method: "GET"
)}

Mã này trả về một lời hứa đại diện cho một yêu cầu chưa được hoàn thành. Để truy xuất dữ liệu từ yêu cầu HTTP này, bạn sẽ sử dụng hàm async / await như sau:

const axios = require("axios");

async function getCatFacts() {
	const response = await axios ({
	url: "https://cat-fact.herokuapp.com/facts",
	method: "GET"
})

console.log(response.data)
}

getCatFacts()

Máy chủ đã trả lời bằng một danh sách các dữ kiện về mèo.

Khi chúng tôi gọi hàm này, một yêu cầu HTTP GET được gửi tới API cat-fact. Chúng tôi sử dụng chức năng async / await để chương trình của chúng tôi không tiếp tục cho đến khi yêu cầu web được hoàn thành. Điều này là do axios trả về một lời hứa trước. Nó trả về dữ liệu từ yêu cầu mà nó đưa ra sau khi yêu cầu đó đã được hoàn thành.

Thư viện axios đi kèm với một số lệnh tốc ký mà bạn có thể sử dụng để thực hiện các yêu cầu web:

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

Trong hướng dẫn này, chúng ta sẽ tập trung vào axios.get() và axios.post() các phương thức sử dụng cú pháp cơ bản giống như tất cả các phương thức viết tắt khác.

Đưa ra yêu cầu GET bằng axios

Trong ví dụ cuối cùng của chúng tôi, chúng tôi đã sử dụng axios để thực hiện một yêu cầu GET. Tuy nhiên, có một cách đơn giản hơn để thực hiện yêu cầu GET với axios:sử dụng axios.get() .

Giả sử bạn muốn truy xuất một danh sách các dữ kiện về mèo, sau đó đếm xem có bao nhiêu con đã được trả về. Bạn có thể làm như vậy bằng cách sử dụng mã sau:

const axios = require("axios");

async function getCatFacts() {
	const response = await axios.get("https://cat-fact.herokuapp.com/facts")

console.log(`{response.data.all.length} cat facts were returned.`)
}

getCatFacts()

Mã tạo ra phản hồi này:225 dữ kiện về mèo đã được trả về.

Hãy chia nhỏ mã của chúng ta. Đầu tiên chúng ta đã khai báo một hàm không đồng bộ được gọi là getCatFacts() trong đó chúng tôi thực hiện một yêu cầu web.

Sau đó, chúng tôi sử dụng axios.get() để truy xuất danh sách thông tin về mèo từ API thông tin về mèo; “Response.data” giữ các đối tượng phản hồi và nội dung yêu cầu từ yêu cầu của chúng tôi.

Cuối cùng, chúng tôi sử dụng thuộc tính .length để tính toán có bao nhiêu dữ kiện về mèo đã được trả lại từ yêu cầu của chúng tôi. Sau đó, chúng tôi thêm số này vào chuỗi “dữ kiện về mèo đã được trả về”.

Gửi tiêu đề bằng axios

Khi bạn đang thực hiện một yêu cầu GET, bạn có thể cần phải gửi một tiêu đề tùy chỉnh đến tài nguyên web mà bạn đang thực hiện yêu cầu. Giả sử bạn đang truy xuất dữ liệu từ một API yêu cầu xác thực. Bạn có thể cần chỉ định một tiêu đề xác thực.

Để chỉ định tiêu đề có yêu cầu axios, bạn có thể sử dụng mã sau:

axios.get("https://urlhere.com", {
	headers: { "header-name": "header-value" }
})

Mã này sẽ gửi tiêu đề "header-name" với giá trị "header-value" đến URL mà chúng tôi đã chỉ định.

Gửi tham số bằng tiên đề

Nhiều API cho phép bạn gửi các tham số trong một yêu cầu GET. Ví dụ:một API có thể cho phép bạn giới hạn số lượng phản hồi được trả về bằng cách sử dụng tham số giới hạn.

Chỉ định một tham số để gửi với một yêu cầu web thật dễ dàng bằng cách sử dụng axios. Bạn có thể bao gồm tham số dưới dạng chuỗi truy vấn hoặc sử dụng thuộc tính params. Dưới đây là một ví dụ về việc axios thực hiện một yêu cầu web bằng cách sử dụng các chuỗi truy vấn để chỉ định một tham số:

axios;get("https://urlhere.com/?date=2020-05-15")

Ngoài ra, bạn có thể chỉ định một thuộc tính params trong các tùy chọn axios bằng cách sử dụng mã này:

axios;get("https://urlhere.com/?date=2020-05-15", {
params: {
date: "2020-05-15"
}
})

Cả hai ví dụ này đều gửi một tham số có tên “date” và giá trị “2020-05-15” đến URL được chỉ định.

Cách thực hiện yêu cầu ĐĂNG bằng cách sử dụng axios

Cú pháp để thực hiện một yêu cầu ĐĂNG giống như tạo một yêu cầu GET. Sự khác biệt là bạn nên sử dụng axios.post() thay vì axios.get() .

Giả sử bạn muốn thực hiện một yêu cầu đăng lên một API. Bạn có thể làm như vậy bằng cách sử dụng mã này:

axios.post("https://urlhere.com")

Bạn có thể chỉ định tiêu đề và tham số giống như cách bạn thực hiện yêu cầu GET. Giả sử bạn muốn gửi tiêu đề “Tên” với giá trị “James” cùng với yêu cầu ĐĂNG của bạn. Bạn có thể làm như vậy bằng cách sử dụng mã này:

axios.post("https://urlhere.com", {
	headers: { "Name": "James" }
})

Kết luận

Thư viện axios được sử dụng để thực hiện các yêu cầu web bằng JavaScript. Nó có thể được sử dụng trên cả front-end bằng JavaScript hoặc trên back-end bằng cách sử dụng nền tảng như Node.js. Không giống như các thư viện yêu cầu web khác, axios được tích hợp tính năng bảo vệ CSRF, hỗ trợ các trình duyệt cũ hơn và sử dụng cấu trúc lời hứa. Nó hoàn hảo để đưa ra các yêu cầu trên web.

Bây giờ, bạn đã sẵn sàng để bắt đầu thực hiện các yêu cầu GET và ĐĂNG bằng cách sử dụng axios như một nhà phát triển web chuyên nghiệp.