Hiển thị nhận yêu cầu 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 để hiển thị dữ liệu từ tìm nạp trong HTML?
			
Tiếp cận. Trước tiên hãy tạo tệp JavaScript, tệp HTML và tệp CSS cần thiết. Sau đó lưu trữ URL API trong một biến (ở đây api_url). Xác định hàm async (ở đây getapi()) và chuyển api_url vào hàm đó. Xác định một phản hồi liên tục và lưu trữ dữ liệu đã tìm nạp bằng phương thức chờ tìm nạp ()
		
			
Làm cách nào để hiển thị kết quả API trong HTML?
			
Một cách đơn giản mà bạn có thể làm là  thêm một phần tử vào nơi bạn muốn hiển thị dữ liệu và sau đó, trong phương thức clickedEvent() của bạn, chỉ cần chọn phần tử đó và hiển thị kết quả của . .
		
			
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 để hiển thị dữ liệu trong HTML bằng JavaScript?
			
JavaScript có thể "hiển thị" dữ liệu theo nhiều cách khác nhau.  . 
 
Viết vào phần tử HTML, sử dụng InternalHTML
 
Viết vào đầu ra HTML bằng tài liệu. viết()
 
Viết vào hộp cảnh báo, sử dụng cửa sổ. báo động()
 
Viết vào bảng điều khiển trình duyệt, sử dụng bảng điều khiển. nhật ký()