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 trong cả Trình duyệt và Nút. nền tảng js
Được 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 Fetch API gốc
- hỗ trợ các trình duyệt cũ hơn [Fetch cần một polyfill]
- có một cách để hủy bỏ một yêu cầu
- có một cách để đặt thời gian chờ phản hồi
- có bảo vệ CSRF tích hợp
- hỗ trợ quá trình tải lên
- thực hiện chuyển đổi dữ liệu JSON tự động
- hoạt động trong nút. js
Axios có thể được cài đặt bằng npm
npm install axios
hoặc sợi
yarn add axios
hoặc đơn giản là đưa nó vào trang của bạn bằng cách sử dụng unpkg. com
API Axios
Bạn có thể bắt đầu một yêu cầu HTTP từ đối tượng
yarn add axios
0axios[{
url: '//dog.ceo/api/breeds/list/all',
method: 'get',
data: {
foo: 'bar'
}
}]
nhưng để thuận tiện, bạn thường sẽ sử dụng
yarn add axios
1yarn add axios
2
[giống như trong jQuery, bạn sẽ sử dụng
yarn add axios
3 và yarn add axios
4 thay vì yarn add axios
5]Axios cung cấp các phương thức cho tất cả các động từ HTTP, ít phổ biến hơn nhưng vẫn được sử dụng
yarn add axios
6yarn add axios
7yarn add axios
8yarn add axios
9
Nó cũng cung cấp một phương thức để lấy các tiêu đề HTTP của một yêu cầu, loại bỏ phần thân
NHẬN yêu cầuMột cách thuận tiện để sử dụng Axios là sử dụng cú pháp async/await hiện đại [ES2017]
nút này. js truy vấn Dog API để truy xuất danh sách tất cả các giống chó, sử dụng
yarn add axios
1 và nó sẽ đếm chúngyarn add axios
5Nếu bạn không muốn sử dụng async/await, bạn có thể sử dụng cú pháp Promises
yarn add axios
6Thêm tham số để NHẬN yêu cầuPhản hồi GET có thể chứa các tham số trong URL, như thế này.
1
Với Axios, bạn có thể thực hiện việc này đơn giản bằng cách sử dụng URL đó
yarn add axios
8hoặc bạn có thể sử dụng thuộc tính
2 trong tùy chọn
0Yêu cầu ĐĂNG
Thực hiện một yêu cầu POST cũng giống như thực hiện một yêu cầu GET, nhưng thay vì
3, bạn sử dụng
4
Hướng dẫn Axios chỉ ra cách tạo yêu cầu trong JavaScript bằng thư viện máy khách Axios. Kiểm tra hướng dẫn tìm nạp JavaScript để biết cách tạo yêu cầu khác trong JavaScript
Axios là ứng dụng khách HTTP dựa trên lời hứa cho trình duyệt và Node. js. Axios giúp dễ dàng gửi các yêu cầu HTTP không đồng bộ đến các điểm cuối REST và thực hiện các thao tác CRUD. Nó có thể được sử dụng trong JavaScript đơn giản hoặc với một thư viện như Vue hoặc React
Trong bài viết này, chúng tôi làm việc với Axios trong một Nút. ứng dụng js
Thiết lập Axios
Đầu tiên, chúng tôi cài đặt Axios
3
Chúng tôi sử dụng nút. js phiên bản 18. 2. 0
4
Chúng tôi bắt đầu một nút mới. ứng dụng js
5
Chúng tôi cài đặt Axios bằng lệnh
68
Có nhiều phương pháp để tạo yêu cầu trong axios
7
Đây là những phương pháp cơ bản để tạo yêu cầu trong axios
6
Đây là những bí danh phương thức, được tạo để thuận tiện
Đối tượng phản hồi Axios
Khi chúng tôi gửi yêu cầu đến máy chủ, nó sẽ trả về phản hồi. Đối tượng phản hồi Axios bao gồm
- dữ liệu - tải trọng được trả về từ máy chủ
- trạng thái - mã HTTP được trả về từ máy chủ
- statusText - thông báo trạng thái HTTP được máy chủ trả về
- tiêu đề - tiêu đề được gửi bởi máy chủ
- config - cấu hình yêu cầu ban đầu
- yêu cầu - đối tượng yêu cầu
Trong ví dụ đầu tiên, chúng tôi tạo một yêu cầu GET đơn giản. Chúng tôi sử dụng các cuộc gọi lại
9
Chúng tôi tạo một yêu cầu GET đơn giản và hiển thị đầu ra
yarn add axios
0Thư viện Axios được bao gồm
yarn add axios
1Với
69, chúng tôi gửi yêu cầu GET. Chúng tôi xuất dữ liệu từ phản hồi. Dữ liệu là mã HTML
yarn add axios
3Axios NHẬN yêu cầu với async/await
Ví dụ sau tạo cùng một yêu cầu. Lần này chúng tôi sử dụng cú pháp
90
yarn add axios
5Ví dụ tạo một yêu cầu GET đơn giản sử dụng cú pháp
90
Các phương thức
69,
93 hoặc
94 là các phương thức thuận tiện cho API axios cơ bản.
95 và
96
40
Ví dụ tạo một yêu cầu GET tới
97
41
Chúng tôi chỉ định các chi tiết của yêu cầu trong đối tượng cấu hình
Yêu cầu HEAD của Axios
Yêu cầu HEAD là yêu cầu GET không có nội dung thư. Trong Axios, yêu cầu HEAD được tạo bằng
98
42
Ví dụ hiển thị trạng thái, tên máy chủ, ngày phản hồi từ phản hồi được tạo bằng yêu cầu HEAD
43
Mã trạng thái phản hồi HTTP cho biết liệu một yêu cầu HTTP cụ thể đã được hoàn tất thành công hay chưa. Các câu trả lời được nhóm thành năm lớp
- Phản hồi thông tin [100–199]
- Phản hồi thành công [200–299]
- Chuyển hướng [300–399]
- Lỗi máy khách [400–499]
- Lỗi máy chủ [500–599]
44
Chúng tôi lấy mã trạng thái từ thuộc tính
99 của phản hồi
45
Trong ví dụ sau, chúng tôi gửi tiêu đề tùy chỉnh
46
Ví dụ gửi một tiêu đề tùy chỉnh
47
Dữ liệu tùy chỉnh được thêm vào thuộc tính
yarn add axios
00 của đối tượng cấu hình48
Chúng tôi xác minh dữ liệu đã gửi
49
Trong ví dụ sau, chúng tôi nối thêm một số tham số truy vấn vào URL
50
Chúng tôi sử dụng
yarn add axios
01 của mô-đun yarn add axios
02 để chuyển đổi đối tượng JSON thành dạng truy vấn URL phù hợp51
Nhiều dịch vụ trực tuyến chứa API công khai. Trong ví dụ sau, chúng tôi tạo yêu cầu tới API Github
52
Trong ví dụ, chúng tôi nhận được số lượng người theo dõi và vị trí của người dùng
53
Axios POST yêu cầu JSON
Yêu cầu POST được tạo bằng phương thức
93
Axios tự động tuần tự hóa các đối tượng JavaScript thành JSON khi được chuyển đến hàm
93 làm tham số thứ hai;
54
Ví dụ tạo một yêu cầu POST tới một dịch vụ thử nghiệm trực tuyến. Tải trọng là tham số thứ hai của hàm
93
55
Trong ví dụ sau, chúng tôi tạo một yêu cầu POST với dữ liệu biểu mẫu
56
Chúng tôi cài đặt mô-đun
yarn add axios
06Với ứng dụng/x-www-form-urlencoded, dữ liệu được gửi trong phần thân của yêu cầu;
57
Để tạo dữ liệu biểu mẫu ở định dạng phù hợp, chúng tôi sử dụng đối tượng FormData
58
Hình ảnh tải xuống Axios
Ví dụ sau đây cho thấy cách tải xuống một hình ảnh với Axios
59
Ví dụ lấy một hình ảnh từ một dịch vụ trực tuyến, nơi lưu giữ hình ảnh của những chú chó
70
Chúng tôi bao gồm các mô-đun
yarn add axios
07 và yarn add axios
0871
Chúng tôi chỉ định loại phản hồi trong đối tượng cấu hình
72
Chúng tôi nhận được hình ảnh
73
Với sự trợ giúp của mô-đun
yarn add axios
08, chúng tôi lưu hình ảnh vào đĩaChúng tôi có thể tạo nhiều yêu cầu trong một lần chụp với Axios
74
Ví dụ tạo các yêu cầu không đồng bộ với danh sách các url đã cho. Nó in url, tên máy chủ và mã trạng thái của trang web
75
yarn add axios
10 đưa ra một yêu cầu không đồng bộ và trả lại một lời hứa76
Chúng tôi thu thập tất cả các lời hứa với
yarn add axios
11. Phương thức giải quyết sau khi tất cả các lời hứa đã cho đã được thực hiện hoặc bị từ chối77
Máy chủ JSON là một công cụ tuyệt vời, cho phép chúng tôi tạo các API REST giả một cách dễ dàng
78
Chúng tôi cài đặt
yarn add axios
1279
Đây là dữ liệu thử nghiệm của chúng tôi
Khởi động máy chủ JSON
Máy chủ JSON được bắt đầu với máy chủ json mà chúng tôi đã cài đặt trên toàn cầu
60
Tùy chọn
yarn add axios
13 được sử dụng để chỉ định dữ liệu cho máy chủ61
Với lệnh curl ta lấy được user có Id 2
Chúng tôi đăng một người dùng mới
62
Ví dụ đăng một người dùng mới
63
Các tham số post được truyền dưới dạng tham số thứ hai cho phương thức
93
Bắt người dùng
Chúng tôi nhận người dùng từ máy chủ thử nghiệm
64
Chương trình này truy xuất tất cả người dùng từ máy chủ thử nghiệm của chúng tôi
65
Một tài nguyên bị xóa với
94
66
Ví dụ xóa user có Id 2
proxy Axios
Proxy là trung gian giữa máy khách yêu cầu tài nguyên và máy chủ cung cấp tài nguyên đó