Axios là thư viện JavaScript cung cấp API đơn giản để gửi yêu cầu HTTP từ mã JavaScript phía máy khách hoặc mã Node.js phía máy chủ. Axios được xây dựng trên Promise API của JavaScript, giúp mã không đồng bộ dễ bảo trì hơn.
Bắt đầu với Axios
Bạn có thể sử dụng Axios trong ứng dụng của mình bằng Mạng phân phối nội dung (CDN) hoặc cài đặt Axios vào dự án của bạn.
Để sử dụng Axios trực tiếp trong HTML, hãy sao chép liên kết CDN bên dưới và chèn vào phần đầu của tệp HTML của bạn:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Với cách tiếp cận này, bạn có thể sử dụng Axios và các phương thức HTTP của nó trong phần thân của tập lệnh HTML của mình. Axios cũng có thể sử dụng API REST trong một khung như React.
Để sử dụng Axios trong dự án Node.js, hãy cài đặt nó trong thư mục dự án của bạn bằng trình quản lý gói npm hoặc yarn:
npm install axios
yarn add axios
Sau khi cài đặt, bạn có thể bắt đầu sử dụng Axios trong dự án JavaScript của mình:
const axios = require('axios');
Cùng với hướng dẫn này, bạn sẽ làm việc với JSONPlaceholder API miễn phí. Mặc dù API này có một bộ tài nguyên, nhưng bạn sẽ chỉ sử dụng /bình luận Và /bài viết thiết bị đầu cuối. Điểm cuối là các URL cụ thể có thể được truy cập để truy xuất hoặc thao tác dữ liệu.
Thực hiện các yêu cầu GET với Axios
Có nhiều cách để thực hiện yêu cầu GET bằng Axios. Tuy nhiên, cú pháp thường phụ thuộc vào sở thích.
Một trong những cách để thực hiện yêu cầu GET là sử dụng axios() phương thức với một đối tượng chỉ định phương thức yêu cầu là lấy và URL để gửi yêu cầu tới.
Ví dụ:
const axios = require("axios");
axios({
method: "get",
url: "https://jsonplaceholder.typicode.com/comments",
})
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.error(err);
});
Ví dụ này tạo một lời hứa bằng cách sử dụng mô hình lập trình không đồng bộ bằng cách xâu chuỗi .sau đó() Và .nắm lấy() các phương pháp. Lời hứa ghi lại phản hồi cho bảng điều khiển khi yêu cầu thành công và ghi lại thông báo lỗi nếu yêu cầu không thành công.
Axios cũng cung cấp một cách dễ dàng hơn để thực hiện các yêu cầu GET giúp loại bỏ nhu cầu truyền một đối tượng bằng cách xâu chuỗi .lấy() phương pháp để trục ví dụ.
Ví dụ:
axios
.get("https://jsonplaceholder.typicode.com/comments")
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.error(err);
});
Thực hiện các yêu cầu POST với Axios
Thực hiện yêu cầu POST với Axios tương tự như thực hiện yêu cầu GET. Bạn có thể gửi dữ liệu đến máy chủ bằng yêu cầu này.
Đoạn mã dưới đây là một ví dụ về cách sử dụng Axios’ .bưu kiện() phương pháp:
axios
.post("https://jsonplaceholder.typicode.com/comments", {
name: "Jackson Smith",
email: "jsmith@example.com",
body: "This is a piece of art.",
})
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.error(err);
});
Mã tạo một yêu cầu POST tới API JSONPlaceholder để tạo nhận xét mới. Các axios.post phương thức gửi dữ liệu đến /bình luận điểm cuối.
Dữ liệu được gửi trong yêu cầu là một đối tượng có tên, e-mailVà thân hình tài sản. Nếu yêu cầu thành công, sau đó phương thức ghi dữ liệu phản hồi vào bàn điều khiển. Và nếu có lỗi, nắm lấy phương thức ghi lỗi vào bàn điều khiển.
Thực hiện các yêu cầu PUT/PATCH với Axios
Bạn có thể sử dụng yêu cầu PUT hoặc PATCH để cập nhật tài nguyên hiện có trên máy chủ. Trong khi PUT thay thế toàn bộ tài nguyên, PATCH chỉ cập nhật các trường được chỉ định.
Để thực hiện yêu cầu PUT hoặc PATCH với Axios, bạn cần sử dụng .đặt() hoặc .vá() các phương pháp tương ứng.
Đây là một ví dụ về cách sử dụng các phương pháp này để cập nhật e-mail thuộc tính của nhận xét có id là 100:
const axios = require("axios");
axios
.get("https://jsonplaceholder.typicode.com/comments/100")
.then((res) => {
console.log(res.data.email);
})
.catch((err) => {
console.error(err);
});
axios
.patch("https://jsonplaceholder.typicode.com/comments/100", {
email: "donaymilin@ether.com",
})
.then((res) => {
console.log(res.data.email);
})
.catch((err) => {
console.error(err);
});
Đầu tiên, chương trình này tạo một yêu cầu GET tới điểm cuối “https://ift.tt/j8eutpI;. Sau đó, nó ghi nhật ký e-mail thuộc tính của nhận xét có ID là 100 đến bàn điều khiển. Chúng tôi đang thực hiện một yêu cầu GET để bạn có thể thấy những gì đã thay đổi sau khi thực hiện yêu cầu PATCH.
Yêu cầu thứ hai là một yêu cầu PATCH đến cùng một điểm cuối. Mã này cập nhật email của nhận xét thành donaymilin@ether.com.
Thực hiện các yêu cầu XÓA với Axios
Bạn có thể dùng XÓA BỎ yêu cầu xóa tài nguyên trên máy chủ.
Lấy ví dụ sau về cách sử dụng .xóa bỏ() phương pháp xóa tài nguyên khỏi máy chủ:
axios
.delete("https://jsonplaceholder.typicode.com/comments/10")
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.error(err);
});
Bằng cách ghi một đối tượng trống vào bảng điều khiển, đoạn mã trên cho thấy rằng nó đã xóa nhận xét có ID là 10.
Thực hiện các yêu cầu đồng thời với Axios
Bạn có thể tìm nạp dữ liệu từ nhiều điểm cuối cùng một lúc bằng Axios. Để làm điều này, bạn cần sử dụng .tất cả() phương pháp. Phương thức này chấp nhận một mảng các yêu cầu làm tham số của nó và chỉ giải quyết khi bạn nhận được tất cả các phản hồi.
Trong ví dụ sau, các .tất cả() phương thức lấy dữ liệu từ hai điểm cuối cùng một lúc:
axios
.all([
axios.get("https://jsonplaceholder.typicode.com/comments?_limit=2"),
axios.get("https://jsonplaceholder.typicode.com/posts?_limit=2"),
])
.then(
axios.spread((comments, posts) => {
console.log(comments.data);
console.log(posts.data);
})
)
.catch((err) => console.error(err));
Khối mã trên gửi các yêu cầu đồng thời và sau đó chuyển các phản hồi tới .sau đó() phương pháp. của Axios .lây lan() phương thức phân tách các câu trả lời và gán từng câu trả lời cho biến của nó.
Cuối cùng, bảng điều khiển ghi nhật ký dữ liệu tài sản của hai phản hồi: bình luận và bài viết.
Chặn yêu cầu với Axios
Đôi khi, bạn có thể cần chặn một yêu cầu trước khi nó đến máy chủ. Bạn có thể sử dụng Axios’ thiết bị chặn.request.use() phương pháp để chặn các yêu cầu.
Trong ví dụ sau, phương thức ghi lại loại yêu cầu vào bảng điều khiển cho mọi yêu cầu được thực hiện:
axios.interceptors.request.use(
(config) => {
console.log(`${config.method} request made`);
return config;
},
(error) => {
return Promise.reject(error);
}
);
axios
.get("https://jsonplaceholder.typicode.com/comments?_limit=2")
.then((res) => console.log(res.data))
.catch((err) => console.error(err));
Chương trình xác định một thiết bị chặn Axios bằng cách sử dụng axios.interceptors.request.use phương pháp. Phương pháp này mất cấu hình Và lỗi các đối tượng làm đối số. Các cấu hình đối tượng chứa thông tin về yêu cầu, bao gồm phương thức yêu cầu (config.method) và URL yêu cầu (config.url).
Hàm chặn trả về cấu hình đối tượng, cho phép yêu cầu tiến hành bình thường. Nếu có lỗi, hàm trả về kết quả bị từ chối Hứa sự vật.
Cuối cùng, chương trình đưa ra yêu cầu kiểm tra thiết bị chặn. Bảng điều khiển sẽ ghi lại loại yêu cầu được thực hiện, trong trường hợp này là yêu cầu GET.
Có nhiều thứ hơn cho Axios
Bạn đã học cách tạo và chặn các yêu cầu trong dự án của mình bằng Axios. Nhiều tính năng khác, chẳng hạn như chuyển đổi yêu cầu và sử dụng các phiên bản Axios có sẵn để bạn khám phá với tư cách là nhà phát triển JavaScript. Axios vẫn là một tùy chọn ưu tiên để thực hiện các yêu cầu HTTP trong các ứng dụng JavaScript của bạn. Tuy nhiên, Fetch API là một tùy chọn tốt khác mà bạn có thể khám phá.
