Javascript phần còn lại api bài ví dụ

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 vị trí 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 response=fetch( 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
Init (không bắt buộc). 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 đề

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

• Cách thức

• thông tin đăng nhập

• Bộ nhớ cache

Ví 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. trạng thái. 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 [i]. strDrink và dữ liệu. đồ uống [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 để POST tới API REST trong JavaScript?
			
Để đăng JSON lên điểm cuối API REST bằng JavaScript/AJAX, bạn phải  gửi yêu cầu POST HTTP đến máy chủ API REST và cung cấp dữ liệu JSON trong phần nội dung của JavaScript/ . Bạn cũng cần chỉ định loại dữ liệu trong nội dung của thông báo POST bằng cách sử dụng Content-Type. tiêu đề yêu cầu ứng dụng/json. . You also need to specify the data type in the body of the POST message using the Content-Type: application/json request header.
		
			
Làm cách nào để gửi yêu cầu JSON POST trong JavaScript?
			
Khi gửi dữ liệu đến máy chủ web, dữ liệu phải là một chuỗi. Vì vậy, chúng tôi đang sử dụng JSON. stringify() để chuyển đổi dữ liệu thành chuỗi và gửi nó qua yêu cầu XHR đến máy chủ
		
			
Làm cách nào để sử dụng phương thức POST trong JavaScript?
			
Xét ví dụ sau.  . 
 
Ví dụ. Phương thức bài đăng () của jQuery. $. bài đăng ('/jquery/submitData', // url { myData. 'Đây là dữ liệu của tôi. '.  
 
Ví dụ. gửi Dữ liệu JSON bằng phương thức post(). $. bài đăng ('/submitJSONData', // url { myData. 'Đây là dữ liệu của tôi. '.  
 
Ví dụ. Phương thức bài đăng () của jQuery
 
		
			
Làm cách nào để nhận phản hồi từ API REST trong JavaScript?
			
Cách 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 await fetch() .