Có phải Axios chỉ dành cho NodeJ không?

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

Cài đặt

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

0

axios({
  url: 'https://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

  1

• yarn 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

  6

• yarn add axios

  7

• yarn add axios

  8

• yarn 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ầu

Mộ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úng

yarn add axios

5

Nế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ầu

Phả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

8

hoặ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

0

Thư viện Axios được bao gồm

yarn add axios

1

Vớ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

3

Axios 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

5

Ví 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ình

48

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ợp

51

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

06

Vớ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

08

71

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 đĩa

Chú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ứa

76

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ối

77

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

12

79

Đâ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 đó

Tôi có thể sử dụng Axios trong chương trình phụ trợ không?

Chúng tôi có thể sử dụng Axios trong JavaScript không?

Bạn có thể sử dụng Axios mà không cần nút không?

Chúng ta có thể sử dụng Axios trong HTML không?