Làm cách nào để gửi yêu cầu API từ HTML?

Fetch API là giao diện dựa trên lời hứa để tìm nạp tài nguyên bằng cách thực hiện các yêu cầu HTTP tới máy chủ từ trình duyệt web. Nó tương tự như các yêu cầu HTTP XML nhưng tốt hơn và mạnh mẽ hơn

Phương thức tìm nạp ()

API tìm nạp đi kèm với phương thức tìm nạp () cho phép bạn tìm nạp dữ liệu từ tất cả các loại địa điểm khác nhau và làm việc với dữ liệu được tìm nạp. Nó cho phép bạn thực hiện một yêu cầu HTTP, tôi. e. , hoặc là yêu cầu GET (để lấy dữ liệu) hoặc yêu cầu POST (để đăng dữ liệu)
Yêu cầu tìm nạp cơ bản có thể được giải thích bằng đoạn mã sau

1
2
3
4
5
6
7
8
9
10
11
12
fetch('url')
  .then(response => {
    //handle response            
    console.log(response);
  })
  .then(data => {
    //handle data
    console.log(data);
  })
  .catch(error => {
    //handle error
  });

Phương thức tìm nạp () có hai tham số. Đường dẫn đến tài nguyên là tham số đầu tiên và luôn được yêu cầu, trong khi tham số init là tùy chọn. Sau đó, nó trả về một lời hứa phân giải thành một đối tượng phản hồi. Đối tượng phản hồi còn chứa dữ liệu cần được chuyển đổi sang định dạng bắt buộc để hoạt động với nó. Tuy nhiên, chúng tôi phải xử lý các lỗi HTTP vì lời hứa chỉ từ chối các lỗi mạng

cú pháp

const phản hồi=tìm nạp( URL [, init])
URL. một đối tượng URL đại diện cho đường dẫn của tài nguyên được tìm nạp
Ban đầu (tùy chọn). Bất kỳ tùy chọn nào khác như

• Phương pháp. Phương thức yêu cầu là GET hoặc POST

• tiêu đề

• Cơ thể người. Cơ thể có thể là bất kỳ điều nào sau đây. Cơ thể người. mảng. Bộ đệm (), Nội dung. Đốm màu (), Cơ thể. formData(), Nội dung. json(), Nội dung. chữ()

• Chế độ

• thông tin đăng nhập

• Bộ nhớ cache

Thí dụ

1
2
3
4
5
6
7
8
9
fetch('url', {
  Method: 'POST',
  Headers: {
    Accept: 'application.json',
    'Content-Type': 'application/json'
  },
  Body: body,
  Cache: 'default'
})

xử lý lỗi

Như đã thảo luận, chúng tôi biết rằng các lỗi HTTP phải được xử lý bằng cách sử dụng các thuộc tính đối tượng phản hồi Response. ok và phản hồi. tình trạng. Phản ứng. ok là một giá trị Boolean cho phép chúng tôi biết liệu phản hồi có thành công hay không, trong khi Phản hồi. trạng thái đại diện cho mã trạng thái HTTP, chẳng hạn như 200 nếu thành công và 404 nếu không tìm thấy tài nguyên. Hãy xem đối tượng phản hồi sau

NHẬN yêu cầu bằng cách sử dụng phương thức tìm nạp ()

Chúng ta hãy xem một ví dụ đơn giản về tìm nạp một hình ảnh giúp hiểu khái niệm này dễ dàng hơn. Các bước liên quan sẽ được

Mã số

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21








Tập dữ liệu có nhiều thuộc tính và trong ví dụ này, tôi đang hiển thị hai thuộc tính, tên thức uống (strDrink) và hướng dẫn (strInstructions), trong một bảng HTML như được hiển thị ở đầu ra. Chúng tôi đang thêm một phần tử bảng trong HTML của mình và sau đó lặp qua dữ liệu JSON và thêm chúng vào bảng (i. e. , dữ liệu. đồ uống [tôi]. strDrink và dữ liệu. đồ uống [tôi]. strHướng dẫn)
Mã số
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39




  
  
    


 
   
   
   




đầu ra
Sử dụng tìm nạp () để POST dữ liệu JSON
Cho đến nay, chúng ta đã thảo luận về hai ví dụ để tìm nạp dữ liệu. Fetch API không chỉ cung cấp cho chúng tôi yêu cầu GET mà còn cung cấp cho chúng tôi yêu cầu POST, PUT và DELETE. Bây giờ chúng ta hãy xem một ví dụ đơn giản về việc đăng dữ liệu JSON. Để làm như vậy, chúng tôi đang sử dụng một điểm cuối https. //jsonplaceholder. đánh máy. com/hướng dẫn/. Chúng ta hãy xem dữ liệu JSON trong điểm cuối này
1
2
3
4
5
6
7
8
9
10
11
Object {
  title: "",
  body: "",
  id: 101
}

body: ""

id: 101

title: ""
Chúng tôi đang tạo một biểu mẫu đơn giản để lấy tiêu đề và nội dung từ người dùng trong phần HTML. Lưu ý rằng ID được tạo tự động. Đến với tập lệnh, chúng ta sẽ thêm một hàm lắng nghe sự kiện và sau đó gọi phương thức tìm nạp. Trong phương thức tìm nạp, chúng tôi đang cung cấp URL của điểm cuối và đối tượng cấu hình. Cuối cùng, chúng tôi đang hiển thị dữ liệu mà chúng tôi đã đăng trong phần tử HTML của mình
 

			
Làm cách nào để gọi API trong HTML?
			
Gọi API web bằng JavaScript . 
 
Định cấu hình ứng dụng để phân phát các tệp tĩnh và bật ánh xạ tệp mặc định.  .  
 
Tạo một thư mục wwwroot trong thư mục gốc của dự án
 
Tạo một thư mục css bên trong thư mục wwwroot
 
Tạo một thư mục js bên trong thư mục wwwroot
 
Thêm một tệp HTML có tên là chỉ mục. html vào thư mục wwwroot
 
		
			
Làm cách nào để gọi API REST từ biểu mẫu HTML?
			
máy khách cần gửi yêu cầu đến máy chủ và nhận phản hồi. Thông thường lập trình viên sẽ liên kết một hàm yêu cầu với một phần tử và sự kiện cụ thể. Trong trường hợp này, bạn cần phải  liên kết hàm yêu cầu với phần tử biểu mẫu . 
		
			
Làm cách nào để gửi dữ liệu từ HTML sang JavaScript?
			
Có một biểu mẫu XHTML bao gồm 3 hộp văn bản và một nút gửi.  Khi nhấn nút gửi, dữ liệu trong các hộp văn bản phải được gửi và chúng phải được JavaScript xác định và phải chuyển các giá trị biến đó tới một cảnh báo . 
		
			
Làm cách nào để gọi yêu cầu HTTP trong JavaScript?
			
Đây là một ví dụ về yêu cầu PATCH sử dụng XMLHttpRequest trong JavaScript. const xhr = XMLHttpRequest mới(); . open("PATCH", "https. //jsonplaceholder. đánh máy. com/posts/101"); xhr. setRequestHeader("Kiểu nội dung", "application/json; charset=utf-8");