API 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 - 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. fetch Javascript Hàm 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() 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ì tạo ra các yêu cầu HTTP, chúng tôi luôn phải cung cấp một URL: fetch 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 để bắt phản hồi và làm điều gì đó với nó. Điều thú vị về 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ừ : then() res fetch - 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.text() - trả về dữ liệu JSON được định dạng, nếu nó tồn tại. res.json() - trả về dữ liệu blob, nếu có. res.blob() - trả về dữ liệu arrayBuffer, nếu có. res.arrayBuffer() - trả về dữ liệu formData, nếu có. res.formData() 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, 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 , 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 , cho phép chúng tôi tải xuống và trả về nội dung của URL được cung cấp: res.text() res.text() then 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 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ề hoặc lỗi cổng xấu sẽ trả về . response 404 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 . 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ệ: res.json() 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à . 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 đượ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(URL, { options }) fetch 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 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ự. body là một phương thức HTTP tiêu chuẩn. Nó có thể là / / / / / / / . method POST GET DELETE PUT CONNECT PATCH TRACE OPTIONS đề 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à / / . mode cors no-cors same-origin đề cập đến cách trình duyệt sẽ tương tác với bộ nhớ cache. Nó có thể là / / / / . cache default no-cache reload force-cache only-if-cached đề 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à / / . credentials include same-origin omit 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ị - nhưng bạn cũng có thể có các tiêu đề HTTP tùy chỉnh. headers Content-Type 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à / / . redirect follow error manual 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à / / / / / / / . referrerPolicy 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 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ề chứ không phải từ URL mà chúng tôi muốn: response Promise response let apiResponse = fetch("https://fjolt.com/api"); console.log(apiResponse); // Returns Promise<Pending> Điều này xảy ra vì hàm chạy, nhưng Javascript không đợi . 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 . fetch() response response Có hai cách để đợi : fetch() Chúng ta có thể sử dụng và thao tác phản hồi của hàm bên trong . then fetch() then() Chúng ta có thể sử dụng và đợi tìm nạp trở lại trước khi sử dụng nội dung của nó. await Sử dụng sau đó để chờ tìm nạp trong Javascript Sử dụng 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 có thể được thao tác bên trong hàm gọi lại , nhưng không phải bên ngoài nó. Ví dụ: then fetch() then() 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ừ bên ngoài chúng ta phải sử dụng . fetch() then 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 . Hầu hết các trình duyệt hiện đại đều hỗ trợ , 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ã nào trong một không đồng bộ. await Chờ đợi cấp cao nhất await async function 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 nào, như hoặc trên đó. Ví dụ: response text() json() // 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 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. 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. fetch() fetch()
