JavaScript là một ngôn ngữ lập trình rất mạnh mẽ được sử dụng liên tục với HTML trong lập trình web. Một trong nhiều điều mà bạn có thể làm với JavaScript là bạn có thể lấy kết quả API từ các điểm cuối tương ứng của họ. Trong hướng dẫn này, bạn sẽ học cách trích xuất dữ liệu Rick và Morty từ API và hiển thị nó trên trang HTML.Fetch API Results from their respective endpoints. In this walkthrough, you are going to learn how to extract Rick and Morty data from an API and display it on an HTML page. Để bắt đầu Đầu tiên, chúng tôi sẽ muốn tạo một tệp dự án nhanh bao gồm tệp index.js và tệp index.html. index.html Bạn sẽ muốn có mã HTML Boilerplate này trong tệp index.html của bạn: <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <title>Rick and Morty Data</title> <script src=’index.js’ defer></script> </head> <body> <div id=’rick-and-morty-characters’></div> </body></html> Trong thiết lập bảng hơi HTML này, chúng tôi bao gồm các phần tử thông thường cộng với một phần tử DIV (#Rick-and-Morty-Staracters), sẽ là nơi dữ liệu Rick và Morty của chúng tôi sẽ được hiển thị. index.js Tiếp theo, chúng tôi sẽ tạo một tệp index.js để trống ngay bây giờ. Đọc tài liệu API của Rick và Morty Chúng tôi sẽ sử dụng ‘Rick và Morty API. Trong tài liệu, chúng tôi sẽ muốn đọc phần ký tự và sẽ đặc biệt muốn có được tất cả các ký tự. Trong bài tập của chúng tôi, chúng tôi sẽ kéo một số nhân vật Rick và Morty từ API bằng điểm cuối sau: ‘https://rickandmortyapi.com/api/character/. Trong tài liệu API, bạn sẽ thấy rằng phản hồi JSON GET ALL ELL { "info": { "count": 394, "pages": 20, "next": "https://rickandmortyapi.com/api/character/?page=2", "prev": "" }, "results": [ { "id": 1, "name": "Rick Sanchez", "status": "Alive", "species": "Human", "type": "", "gender": "Male", "origin": { "name": "Earth", "url": "https://rickandmortyapi.com/api/location/1" }, "location": { "name": "Earth", "url": "https://rickandmortyapi.com/api/location/20" }, "image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg", "episode": [ "https://rickandmortyapi.com/api/episode/1", "https://rickandmortyapi.com/api/episode/2", // ... ], "url": "https://rickandmortyapi.com/api/character/1", "created": "2017-11-04T18:48:46.250Z" }, // ... ]} Trong bài tập của chúng tôi, chúng tôi đã giành được lo lắng về việc phân trang, nhưng thay vào đó sẽ lấy trang kết quả đầu tiên và sẽ hiển thị nó vào trang HTML. JavaScript tìm nạp JavaScript Fetch là cách gửi các yêu cầu mạng của JavaScript. Một mô tả sơ bộ về cú pháp là: 'Let Promise = fetch (url, [Tùy chọn]);', trong đó URL là URL nhận được yêu cầu và tùy chọn là các tham số tùy chọn có thể được thêm vào (tiêu đề, cơ thể/tải trọng, vv vv). Tìm nạp có thể hơi khó hiểu ở chỗ nó trả về một lời hứa, trong đó chứa phản hồi; Do đó, chúng tôi sẽ cần sử dụng ‘.Hen () để xử lý lời hứa. Bắt đầu mã Bây giờ chúng tôi đã thiết lập mọi thứ, hãy để bắt đầu với phần thú vị, mã! Chúng tôi sẽ chuyển sang tệp index.js của mình và sẽ nhập mã sau trong: fetch(‘https://rickandmortyapi.com/api/character/’) .then(response => response.json()) .then(characters => showCharacters(characters.results)); Đây là yêu cầu tìm nạp cơ bản của chúng tôi, gửi yêu cầu nhận được API Rick và Morty và sau đó nhận phản hồi JSON và chạy chức năng ShowCharacters của chúng tôi (chúng tôi sẽ tạo điều này tiếp theo, sẽ hiển thị dữ liệu trên trang HTML) với kết quả của JSON Refwer 'thuộc tính như một đầu vào. Bây giờ, hãy tìm ra cách để nhận được yêu cầu tìm nạp để hiển thị tên nhân vật Rick và Morty trong Div của Rick và Morty Starters trên trang HTML của chúng tôi. showCharacters = characters => { const charactersDiv = document.querySelector(‘#rick-and-morty- characters’); characters.forEach(character => { const characterElement = document.createElement(‘p’); characterElement.innerText = `Character Name: ${character.name}`; charactersDiv.append(characterElement); });} Mở và kiểm tra trang HTML Bây giờ chúng tôi sẽ mở một máy chủ và kiểm tra trang HTML của chúng tôi để đảm bảo rằng nó hiển thị dữ liệu các ký tự Rick và Morty trong DIV. Tôi sẽ làm điều này bằng cách sử dụng lite-server; Do đó, tôi sẽ mở một thiết bị đầu cuối và điều hướng đến thư mục trong đó tệp index.html của tôi và tôi sẽ chạy lệnh sau: ‘lite-server. Sau đó tôi sẽ được cung cấp một URL localhost nơi trang HTML của tôi được hiển thị. Chúng tôi thành công! Như bạn có thể thấy trang HTML đang hiển thị trang đầu tiên của dữ liệu từ Rick và Morty có được tất cả các điểm cuối ký tự. Sự kết luận Như bạn đã học, Fetch rất mạnh mẽ và rất dễ sử dụng cùng với HTML. Bạn có thể thiết lập một trang HTML được gieo bằng dữ liệu từ API. Mã hóa hạnh phúc! Chúng ta có thể sử dụng API trong HTML không?API HTML chủ yếu hữu ích trong các thư viện cho phép các thành phần UI như phòng trưng bày, kéo và thả, accordion, tab, băng chuyền, v.v.Không cần API HTML.. As a rule of thumb, if a non-programmer cannot understand what your library does, then your library doesn't need an HTML API.
HTML là gì?Fetch () Phương thức Fetch () toàn cầu bắt đầu quá trình tìm nạp tài nguyên từ mạng, trả lại một lời hứa được thực hiện sau khi phản hồi có sẵn.Lời hứa giải quyết cho đối tượng phản hồi đại diện cho phản hồi cho yêu cầu của bạn.starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available. The promise resolves to the Response object representing the response to your request.
Chúng ta có thể sử dụng API trong JavaScript không?API trong JavaScript phía máy khách phía máy khách, đặc biệt, có nhiều API có sẵn-đây không phải là một phần của chính ngôn ngữ JavaScript, thay vào đó chúng được xây dựng trên ngôn ngữ JavaScript cốt lõi, cung cấp cho bạn siêu cường để sử dụngTrong mã JavaScript của bạn.Client-side JavaScript, in particular, has many APIs available to it — these are not part of the JavaScript language itself, rather they are built on top of the core JavaScript language, providing you with extra superpowers to use in your JavaScript code. |
