Nếu bạn đang làm việc với quản lý gói nút thì bạn có thể tải xuống Axios bằng cách nhập lệnh sau vào thiết bị đầu cuối của trình chỉnh sửa mã của bạn
$ npm cài đặt axios
Nếu bạn đang làm việc với vanilla JavaScript, thì bạn có thể đưa Axios được lưu trữ trên CDN vào tệp HTML của mình bằng cách sử dụng dòng sau
Ngoài ra, để kiểm tra Axios, chúng tôi sẽ sử dụng API giả do Req cung cấp. độ phân giải. Và URL của API là “https. // yêu cầu. trong/api/người dùng”
Vì là bài hướng dẫn các bạn làm việc với Axios để thực hiện các yêu cầu HTTP nên chúng ta sẽ không thao tác với các phần tử HTML. Chúng tôi chỉ có các dòng sau trong trang web HTML
< trung tâm >
< div id="demoID">Axios HTTP Requests
Nhận yêu cầu với Axios
Để thực hiện các yêu cầu GET tới API bằng API, chúng tôi sử dụng cú pháp sau
axios. lấy[URL] . sau đó[ phản hồi => . }].bắt[ lỗi =>[]];
Hãy sử dụng cú pháp này để tạo một yêu cầu nhận cho req. API của người dùng res
axios. nhận["https. // yêu cầu. trong/api/người dùng"] . thì[[ phản hồi ] . => {
const users = response.dữ liệu . dữ liệu;
bảng điều khiển. log[ `NHẬN người dùng`, người dùng ];
}].bắt[[ lỗi ] . =>console.lỗi[ lỗi ]];
Nhưng chúng tôi muốn bọc phương thức get này trong một hàm, vì vậy hãy sử dụng các dòng mã sau
const getUsers = [] => {
axios
.nhận["https. // yêu cầu. trong/api/người dùng"]
. thì[[ phản hồi ] . => {
const users = response.dữ liệu . dữ liệu;
bảng điều khiển. log[ `NHẬN người dùng`, người dùng ];
}]
.bắt[[ lỗi ] . =>console.lỗi[ lỗi ]];
};
Bây giờ, tất cả những gì chúng ta phải làm là gọi hàm getUesrs[] với dòng mã sau
lấyNgười dùng [];
Bằng cách chạy tệp HTML, bạn sẽ thấy các kết quả sau
Nếu chúng tôi mở rộng mục này thì chúng tôi sẽ có thể thấy phản hồi của API rõ ràng hơn nhiều
Chúng tôi đã thực hiện thành công yêu cầu GET bằng Axios và in phản hồi ra bảng điều khiển
Đăng yêu cầu với Axios
Để thực hiện yêu cầu đăng bài với Axios, bạn cần sử dụng cú pháp sau
axios. bài đăng[URL] . thì[[ phản hồi ] . => { }].bắt[[ lỗi ]];
Để thực hiện một yêu cầu gửi tới Req. Res API, chúng tôi sử dụng các dòng mã sau để tạo người dùng mới
const createUser = [ user ] => {
axios
.bài đăng["https. // yêu cầu. in/api/users" , người dùng ]
. thì[[ phản hồi ] . => {
const addedUser = response.dữ liệu;
bảng điều khiển. log[ `POST . người dùng được thêm`, người dùng được thêm vào ];
}]
.bắt[[ lỗi ] . =>console.lỗi[ lỗi ]];
};
Để gọi yêu cầu POST này, chúng ta cần gọi hàm này là createUser[], nhưng trước khi thực hiện, chúng ta cần kiểm tra API xem loại JSON nào được chấp nhận để tạo người dùng mới. Vì vậy, trên Yêu cầu. Trang web Req chúng ta có thể thấy định dạng JSON sau đây cho yêu cầu POST
Nó nhận một cặp khóa-giá trị "tên" và một cặp khóa-giá trị "công việc". Hãy gọi hàm createUser[] với JSON thích hợp bên trong nó
createUser [{
tên . "John Doe" ,
công việc . "Kiểm toán viên" ,
}];
Chạy tệp và bạn sẽ thấy kết quả sau trên bảng điều khiển của trình duyệt của mình
Vậy là xong, chúng ta đã có thể gửi yêu cầu POST tới API bằng Axios
Xóa yêu cầu với Axios
Để thực hiện các yêu cầu xóa với axios tới API, bạn phải sử dụng cú pháp sau
axios. xóa[URL] . thì[[ phản hồi ] . => {}].bắt[[ lỗi ] => []];
Để thực hiện yêu cầu xóa đối với req. res API, hãy sử dụng các dòng mã sau
const xóa Người dùng = [ id ] => {
axios
.xóa[ `https . //yêu cầu. in/api/users/${id}`]
. thì[[ phản hồi ] . => {
console.log[ `DELETE . người dùng bị xóa`, id ];
}]
.bắt[[ lỗi ] . =>console.lỗi[ lỗi ]];
};
Tất cả những gì chúng ta phải làm là gọi hàm deleteUser bằng dòng sau
xóa người dùng [2];
Chạy tệp và quan sát kết quả trên bảng điều khiển của trình duyệt
Vậy là xong, chúng ta đã thực hiện thành công một yêu cầu XÓA tới một API bằng Axios
Phần kết luận
Axios là ứng dụng khách HTTP có thể được bao gồm trong các dự án nút của bạn bằng cách sử dụng trình quản lý gói nút hoặc trong dự án javascript vanilla của bạn bằng cách sử dụng Axios được lưu trữ trên CDN. Axios được sử dụng để tạo XMLHttpRequests thành API và nó hoàn toàn là một thư viện dựa trên lời hứa. Trong bài đăng này, chúng ta đã học cách tương tác với API bên ngoài bằng Axios và thực hiện các yêu cầu GET, POST và DELETE khác nhau đối với API