API
let websiteData = fetch["//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àoHàm
let websiteData = fetch["//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["//fjolt.com"].then[res => res.text[]].then[[data] => {
return data;
}];
// Now contains our website's HTML.
3Sử 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["//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 URLlet fetchExample = fetch["//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["//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["//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["//fjolt.com"].then[res => res.text[]].then[[data] => {
return data;
}];
// Now contains our website's HTML.
2
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ề HTMLlet websiteData = fetch["//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ạilet websiteData = fetch["//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["//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["//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ólet websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
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["//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["//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["//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ấplet websiteData = fetch["//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["//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["//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ề 04let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
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["//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["//fjolt.com"].then[res => res.text[]].then[[data] => {
return data;
}];
// Now contains our website's HTML.
0Cá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["//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["//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ụnglet websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => {
return data;
}];
// Now contains our website's HTML.
8Và đây là một bản tóm tắt về ý nghĩa của mỗi ý nghĩa
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óalet websiteData = fetch["//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["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
84/let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
85/let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
86/let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
87let websiteData = fetch["//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["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
89/let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
10/let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
11let websiteData = fetch["//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["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
17let websiteData = fetch["//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["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
19/let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
11/let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
21let websiteData = fetch["//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["//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ỉnhlet websiteData = fetch["//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["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
25/let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
26/let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
27let websiteData = fetch["//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["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
29/let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
10/let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
11/let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
12/let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
11/let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
14/let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
15/let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
16let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
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["//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["//fjolt.com"].then[res => res.text[]].then[[data] => {
return data;
}];
// Now contains our website's HTML.
18, không phải let websiteData = fetch["//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ốnlet websiteData = fetch["//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["//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["//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["//fjolt.com"].then[res => res.text[]].then[[data] => {
return data;
}];
// Now contains our website's HTML.
02Có hai cách để đợi
let websiteData = fetch["//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
01 và điều khiển phản hồi củalet websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
3 trong vònglet websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
1let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
- Chúng tôi có thể sử dụng
27 và đợi tìm nạp trở lại trước khi sử dụng nội dung của nólet websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => { return data; }]; // Now contains our website's HTML.
Sử dụng then để chờ tìm nạp trong Javascript
Việc sử dụng
let websiteData = fetch["//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["//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["//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["//fjolt.com"].then[res => res.text[]].then[[data] => {
return data;
}];
// Now contains our website's HTML.
2Nếu chúng tôi muốn sử dụng nội dung từ
let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => {
return data;
}];
// Now contains our website's HTML.
3 bên ngoài let websiteData = fetch["//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["//fjolt.com"].then[res => res.text[]].then[[data] => {
return data;
}];
// Now contains our website's HTML.
27Sử 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["//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["//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["//fjolt.com"].then[res => res.text[]].then[[data] => {
return data;
}];
// Now contains our website's HTML.
36Nế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["//fjolt.com"].then[res => res.text[]].then[[data] => {
return data;
}];
// Now contains our website's HTML.
02 nào, như let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => {
return data;
}];
// Now contains our website's HTML.
38 hoặc let websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => {
return data;
}];
// Now contains our website's HTML.
39 trên đó. Ví dụlet websiteData = fetch["//fjolt.com"].then[res => res.text[]].then[[data] => {
return data;
}];
// Now contains our website's HTML.
1Nế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["//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["//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