Tìm nạp một phần của javascript?

Question

API


 Nội dung chính Show
 Sử dụng tìm nạp trong Javascript
ví dụ 1. Nhận nội dung HTML của trang web bằng tìm nạp Javascript
ví dụ 2. Nhận JSON qua Tìm nạp Javascript
Các tùy chọn cho Tìm nạp Javascript
Hãy nhớ rằng, tìm nạp Javascript là không đồng bộ
Sử dụng then để chờ tìm nạp trong Javascript
Sử dụng await để chờ tìm nạp trong Javascript
Sự kết luận
Tìm nạp là một phần của JavaScript hay trình duyệt?
Làm cách nào để bao gồm tìm nạp trong JavaScript?
Tìm nạp được thêm vào JavaScript khi nào?
Tìm nạp JavaScript hoạt động như thế nào?
 
let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

2 cho phép chúng tôi tạo một yêu cầu HTTP để chúng tôi hoàn thành một số việc trong Javascript - như truy xuất dữ liệu từ API, đăng dữ liệu lên máy chủ hoặc thậm chí chỉ lấy toàn bộ nội dung của trang web. Yêu cầu HTTP này sẽ truy xuất dữ liệu không đồng bộ từ URL được cung cấp và tạo một số loại phản hồi HTTP. Hãy xem nó hoạt động như thế nào

Hàm


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

3 là một hàm toàn cầu và được sử dụng thường xuyên nhất để tương tác với các API. Nếu bạn chưa quen với nó, bạn không đơn độc - vì vậy hãy xem cách hoạt động của


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

3

Sử dụng tìm nạp trong Javascript

Việc sử dụng tìm nạp cơ bản nhất cần một đối số - URL mà chúng tôi muốn tìm nạp. Vì


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

2 tạo các yêu cầu HTTP nên chúng tôi luôn phải cung cấp một URL


let fetchExample = fetch("https://fjolt.com").then((res) => {
    // Do something with res
});

Vì kết quả tìm nạp không đồng bộ, nên chúng tôi có thể sử dụng


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

1 để bắt phản hồi và thực hiện điều gì đó với nó. Điều thú vị về


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

2 hoặc phản hồi được trả về là nó có một loạt các phương thức được tích hợp sẵn, cho phép chúng tôi phân tích ngay nội dung mà chúng tôi nhận được từ


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

2


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

4 - trả về nội dung văn bản của một URL. Nếu đó là một trang web, nó sẽ trả về HTML


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

5 - trả về dữ liệu JSON được định dạng, nếu nó tồn tại


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

6 - trả về dữ liệu blob, nếu có


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

7 - trả về dữ liệu ArrayBuffer, nếu có


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

8 - trả về dữ liệu formData, nếu có

Vì các URL khác nhau tạo ra các loại nội dung khác nhau nên các phương pháp trên cho phép chúng tôi phân tích cú pháp nội dung đó theo bất kỳ cách nào chúng tôi muốn. Để hiểu cách thức hoạt động của tất cả, hãy xem xét hai ví dụ rất phổ biến

ví dụ 1. Nhận nội dung HTML của trang web bằng tìm nạp Javascript

Như đã đề cập ở trên,


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

4 cung cấp cho chúng tôi nội dung văn bản của một URL - vì vậy chúng tôi có thể sử dụng nó để lấy toàn bộ nội dung HTML của một URL. Khi chúng tôi bắt được phản hồi của mình bằng cách sử dụng


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

4, chúng tôi có thể bắt được phản hồi bằng một


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

01 khác, cho phép chúng tôi tải xuống và trả lại nội dung của URL được cung cấp


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

Nếu liên kết không tồn tại hoặc xảy ra lỗi, đối tượng


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

02 của chúng tôi sẽ chứa lỗi. Ví dụ: một trang không tìm thấy sẽ trả về


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

03 hoặc lỗi cổng không hợp lệ sẽ trả về





let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
 return data;
});
// Now contains our website's HTML.

04

ví dụ 2. Nhận JSON qua Tìm nạp Javascript

Nếu nội dung của một URL bao gồm JSON, chúng ta có thể sử dụng


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

5. Ví dụ: đoạn mã sau sẽ trả về một đối tượng JSON từ URL, giả sử rằng URL đang gửi lại JSON hợp lệ


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

0

Các tùy chọn cho Tìm nạp Javascript

Việc hiểu các tùy chọn có sẵn trong tìm nạp cũng rất quan trọng,. Chúng đến sau URL, như một đối tượng - tôi. e.


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

06. Nếu bạn đã từng làm việc với các yêu cầu HTTP trước đây, một số yêu cầu có thể quen thuộc. Hàm


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

2 được hiển thị bên dưới chứa tất cả các tùy chọn có thể có mà bạn có thể sử dụng


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

8

Và đây là một bản tóm tắt về ý nghĩa của mỗi ý nghĩa


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

08 chứa nội dung của văn bản. Trong ví dụ này, chúng tôi đang gửi một số JSON, cần được xâu chuỗi hóa


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

09 là một phương thức HTTP tiêu chuẩn. Nó có thể là ________ 180/________ 181/________ 182/_______ 183/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

84/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

85/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

86/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

87


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

88 đề cập đến nếu yêu cầu nguồn gốc chéo được chấp nhận. Nó có thể là


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

89/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

10/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

11


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

12 đề cập đến cách trình duyệt sẽ tương tác với bộ đệm. Nó có thể là ________ 313/______ 314/________ 315/_______ 316/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

17


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

18 đề cập đến việc có nên gửi cookie có nguồn gốc chéo cùng với yêu cầu hay không. Nó có thể là


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

19/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

11/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

21





let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

22 chứa bất kỳ tiêu đề nào được liên kết với yêu cầu. Nó có thể chứa bất kỳ tiêu đề HTTP nào - ví dụ: ở đây nó hiển thị


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

23 - nhưng bạn cũng có thể có các tiêu đề HTTP tùy chỉnh


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

24 xác định điều gì sẽ xảy ra nếu URL được tìm nạp chuyển hướng. Nó có thể là


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

25/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

26/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

27


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

28 xác định lượng thông tin liên kết giới thiệu được chuyển với yêu cầu. Nó có thể là


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

29/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

10/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

11/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

12/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

11/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

14/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

15/


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

16

Hãy nhớ rằng, tìm nạp Javascript là không đồng bộ

Khi chúng tôi sử dụng tìm nạp, nó sẽ chuyển đến URL, thu thập thông tin và cung cấp lại cho chúng tôi một


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

02. Điều này không phải là ngay lập tức, vì tải URL, tải xuống và đưa nó trở lại cần có thời gian. Nếu chúng tôi chỉ chạy tìm nạp một mình, nhật ký bảng điều khiển ngay sau đó sẽ chỉ trả về


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

18, không phải


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

02 từ URL mà chúng tôi muốn


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

1

Điều này xảy ra do hàm


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

3 chạy nhưng Javascript không đợi hàm


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

02. Như vậy, chúng ta phải yêu cầu Javascript đợi nó một cách rõ ràng, nếu chúng ta muốn truy cập vào


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

02

Có hai cách để đợi


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

3

Chúng tôi có thể sử dụng





let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

01 và điều khiển phản hồi của


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

3 trong vòng


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

1

Chúng tôi có thể sử dụng


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

27 và đợi tìm nạp trở lại trước khi sử dụng nội dung của nó

Sử dụng then để chờ tìm nạp trong Javascript

Việc sử dụng


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

01 thường được sử dụng để bắt và xử lý phản hồi từ tìm nạp. Nội dung của


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

3 có thể được thao tác trong chức năng gọi lại của


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

1, nhưng không phải bên ngoài nó. Ví dụ


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

2

Nếu chúng tôi muốn sử dụng nội dung từ


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

3 bên ngoài


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

01, chúng tôi phải sử dụng


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

27

Sử dụng await để chờ tìm nạp trong Javascript

Một cách khác để chờ tìm nạp là sử dụng từ khóa


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

27. Hầu hết các trình duyệt hiện đại đều hỗ trợ Chờ cấp cao nhất, nhưng nếu bạn lo lắng về hỗ trợ hoặc sử dụng phiên bản Nút. JS trước 14. 8, bạn sẽ muốn bọc bất kỳ mã


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

27 nào trong một mã


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

36

Nếu chúng tôi sử dụng sự chờ đợi, chúng tôi có thể sử dụng phản hồi từ API của chúng tôi ở bất kỳ đâu trong chức năng hoặc mã của chúng tôi và sử dụng bất kỳ chức năng


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

02 nào, như


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

38 hoặc


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

39 trên đó. Ví dụ


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

1

Nếu bạn muốn tìm hiểu thêm về hoạt động không đồng bộ, hãy đọc hướng dẫn của chúng tôi về Javascript không đồng bộ tại đây

Sự kết luận

Trong hướng dẫn này, chúng ta đã tìm hiểu cách thức hoạt động của tìm nạp. Chúng tôi đã trình bày các tùy chọn khác nhau mà bạn có thể gửi cùng với yêu cầu


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

3 của mình và cách chờ phản hồi bằng các khái niệm không đồng bộ trong Javascript.


let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

3 là một công cụ cực kỳ mạnh mẽ trong Javascript và luôn được sử dụng thường xuyên trong các sản phẩm lớn. Tôi hy vọng bạn thích bài viết này

Tìm nạp là một phần của JavaScript hay trình duyệt?

API Tìm nạp cung cấp giao diện JavaScript để truy cập và thao tác với các phần của giao thức, chẳng hạn như yêu cầu và phản hồi. Nó cũng cung cấp một phương thức tìm nạp () toàn cầu cung cấp một cách hợp lý, dễ dàng để tìm nạp tài nguyên không đồng bộ trên mạng.

Làm cách nào để bao gồm tìm nạp trong JavaScript?

Ví dụ: mã này gửi đối tượng người dùng dưới dạng JSON. hãy để người dùng = {tên. 'John', họ. 'Thợ rèn' }; . 'POST', tiêu đề. { 'Loại nội dung'. 'application/json;charset=utf-8' }, nội dung. JSON. xâu chuỗi (người dùng) }); . json();

Tìm nạp được thêm vào JavaScript khi nào?

Theo sự phát triển của JS, API tìm nạp đã được giới thiệu vào 2015 và đã trở thành tiêu chuẩn để xử lý các yêu cầu dữ liệu ngày nay.

Tìm nạp JavaScript hoạt động như thế nào?

Phương thức tìm nạp () nhận một đối số bắt buộc, đường dẫn đến tài nguyên bạn muốn tìm nạp. Nó trả về một Lời hứa giải quyết Phản hồi cho yêu cầu đó — ngay khi máy chủ phản hồi với các tiêu đề — ngay cả khi phản hồi của máy chủ là trạng thái lỗi HTTP

programming javascript

Tìm nạp một phần của javascript?

Sử dụng tìm nạp trong Javascript

ví dụ 1. Nhận nội dung HTML của trang web bằng tìm nạp Javascript

ví dụ 2. Nhận JSON qua Tìm nạp Javascript

Các tùy chọn cho Tìm nạp Javascript

Hãy nhớ rằng, tìm nạp Javascript là không đồng bộ

Sử dụng then để chờ tìm nạp trong Javascript

Sử dụng await để chờ tìm nạp trong Javascript

Sự kết luận

Tìm nạp là một phần của JavaScript hay trình duyệt?

Làm cách nào để bao gồm tìm nạp trong JavaScript?

Tìm nạp được thêm vào JavaScript khi nào?

Tìm nạp JavaScript hoạt động như thế nào?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội