Cách tìm nạp dữ liệu trong Javascript như một người chuyên nghiệp

API fetch cho phép chúng tôi tạo một yêu cầu HTTP để chúng tôi thực hiện 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 từ URL được cung cấp một cách không đồng bộ và tạo ra một số loại phản hồi HTTP. Hãy xem nó hoạt động như thế nào.

Hàm fetch() là một hàm toàn cục và nó đượ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 fetch() .

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

Cách sử dụng cơ bản nhất của tìm nạp có một đối số - URL mà chúng tôi muốn tìm nạp. Vì fetch tạo ra các yêu cầu HTTP, 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ả của một lần tìm nạp là không đồng bộ, chúng ta có thể sử dụng then() để bắt phản hồi và làm điều gì đó với nó. Điều thú vị về res hoặc response 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 cú pháp ngay lập tức nội dung chúng tôi nhận được từ fetch :

• res.text() - trả về nội dung văn bản của một URL. Nếu đó là một trang web, nó trả về HTML.
• res.json() - trả về dữ liệu JSON được định dạng, nếu nó tồn tại.
• res.blob() - trả về dữ liệu blob, nếu có.
• res.arrayBuffer() - trả về dữ liệu arrayBuffer, nếu có.
• res.formData() - 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, 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 tất cả hoạt động như thế nào, hãy xem hai ví dụ rất phổ biến.

Ví dụ 1: Lấy nội dung HTML của một trang web bằng cách sử dụng tìm nạp Javascript

Như đã đề cập ở trên, res.text() cung cấp cho chúng ta nội dung văn bản của một URL - vì vậy chúng ta 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 câu trả lời của mình bằng res.text() , chúng tôi có thể bắt được câu trả lời bằng một câu trả lời khác then , cho phép chúng tôi tải xuống và trả về 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 response của chúng tôi sẽ có lỗi. Ví dụ: một trang không được tìm thấy sẽ trả về 404 hoặc lỗi cổng xấu sẽ trả về 502 .

Ví dụ 2: Tải JSON qua Javascript Fetch

Nếu nội dung của URL bao gồm JSON, chúng ta có thể sử dụng res.json() . Ví dụ: mã sau sẽ trả về một đối tượng JSON từ URL, giả sử URL đang gửi lại JSON hợp lệ:

 let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => { return data; }); // Now contains a JSON object - assuming one exists

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

Điều quan trọng là phải hiểu các tùy chọn có sẵn trong tìm nạp,. Chúng đứng sau URL, như một đối tượng - tức là fetch(URL, { options }) . Nếu bạn đã làm việc với các yêu cầu HTTP trước đây, một số có thể quen thuộc. Hàm fetch được hiển thị bên dưới chứa tất cả các tùy chọn khả thi mà bạn có thể sử dụng:

 fetch("https://fjolt.com/", { body: JSON.stringify({ someData: "value" }) method: 'POST' mode: 'cors' cache: 'no-cache' credentials: 'same-origin' headers: { 'Content-Type': 'application/json' }, redirect: 'follow' referrerPolicy: 'no-referrer' });

Và đây là bản tóm tắt ý nghĩa của từng điều này:

• nội dung chứa nội dung của body bản. Trong ví dụ này, chúng tôi đang gửi một số JSON, cần được chuỗi ký tự.
• method là một phương thức HTTP tiêu chuẩn. Nó có thể là POST / GET / DELETE / PUT / CONNECT / PATCH / TRACE / OPTIONS .
• mode đề cập đến việc các yêu cầu xuất xứ chéo có được chấp nhận hay không. Nó có thể là cors / no-cors / same-origin .
• cache đề cập đến cách trình duyệt sẽ tương tác với bộ nhớ cache. Nó có thể là default / no-cache / reload / force-cache / only-if-cached .
• credentials đề cập đến việc các cookie có nguồn gốc chéo có được gửi cùng với yêu cầu hay không. Nó có thể là include / same-origin / omit .
• headers 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ị Content-Type - nhưng bạn cũng có thể có các tiêu đề HTTP tùy chỉnh.
• redirect 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à follow / error / manual .
• referrerPolicy xác định lượng thông tin liên kết giới thiệu được chuyển cùng với yêu cầu. Nó có thể là no-referrer / no-referrer-when-downgrade / origin / origin-when-cross-origin / same-origin / strict-origin / strict-origin-when-cross-origin / unsafe-url .

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ẽ đi đến URL, thu thập thông tin và cung cấp response lại cho chúng tôi. Việc này không diễn ra ngay lập tức, vì việc 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ề Promise chứ không phải response từ URL mà chúng tôi muốn:

 let apiResponse = fetch("https://fjolt.com/api"); console.log(apiResponse); // Returns Promise<Pending>

Điều này xảy ra vì hàm fetch() chạy, nhưng Javascript không đợi response . Như vậy, chúng ta phải nói rõ ràng với Javascript rằng hãy đợi nó, nếu chúng ta muốn truy cập vào response .

Có hai cách để đợi fetch() :

• Chúng ta có thể sử dụng then và thao tác phản hồi của hàm fetch() bên trong then() .
• Chúng ta có thể sử dụng await và đợi tìm nạp trở lại trước khi sử dụng nội dung của nó.

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

Sử dụng then thường được sử dụng để bắt và xử lý phản hồi từ quá trình tìm nạp. Nội dung của fetch() có thể được thao tác bên trong hàm gọi lại then() , nhưng không phải bên ngoài nó. Ví dụ:

 let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => { console.log(data); // We can do anything with the data from our api here. return data; }); console.log(apiResponse); // This will return Promise<Pending> // That means we can't use the apiResponse variable // outside of the then() function.

Nếu chúng ta muốn sử dụng nội dung từ fetch() bên ngoài then chúng ta phải sử dụng await .

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 await . Hầu hết các trình duyệt hiện đại đều hỗ trợ Chờ đợi cấp cao nhất , nhưng nếu bạn lo lắng về việc hỗ trợ hoặc sử dụng phiên bản Node.JS trước 14.8, bạn sẽ muốn bọc bất kỳ mã await nào trong một async function không đồng bộ.

Nếu chúng tôi sử dụng await, chúng tôi có thể sử dụng phản hồi từ API của mình ở bất kỳ đâu trong hàm hoặc mã của chúng tôi và sử dụng bất kỳ hàm response nào, như text() hoặc json() trên đó. Ví dụ:

 // Typically we wrap await in an async function // But most modern browsers and Node.JS support // await statements outside of async functions now. async getAPI() { let apiResponse = await fetch("https://fjolt.com/api"); let response = apiResponse.json(); // Since we waited for our API to respond using await // The response variable will return the response from the API // And not a promise. console.log(response); } getAPI();

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 tôi đã xem xét cách hoạt động của tính năng tìm nạp. Chúng tôi đã hiển thị các tùy chọn khác nhau mà bạn có thể gửi với các yêu cầu fetch() của mình và cách chờ phản hồi bằng cách sử dụng các khái niệm không đồng bộ trong Javascript. fetch() là một công cụ cực kỳ mạnh mẽ trong Javascript và đượ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.