Api — Cách Lấy Api Của 1 Trang Web Là Gì? Hướng Dẫn Nhanh Về Api Lập Chỉ Mục

Posted on by adminChuyên mục:Kiến thức Internet

Trong bài viết này, tôi sẽ trình bày một ví dụ đơn giản về cách lấy dữ liệu bằng JavaScript từ API bằng phương thức fetch () và sau đó đổ dữ liệu vào trang web.

Bạn đang xem : Cách lấy api của 1 trang web
*
*

Nguồn dữ liệu

Nguồn tài liệu tất cả chúng ta sẽ dùng cho API JSON https://www.gov.uk/bank-holiday.json

Khai báo

Trong JavaScript, tiên phong tất cả chúng ta phải khai báo để thuận tiện thao tác phía bên dưới .

// Khai báo một biến, để dễ thao tácconst endpoint = ” https://www.gov.uk/bank-holiday.json”;// đơn giản vậy thôi.fetch(endpoint)

Kiểu tra giá trị với console.log()

Chúng ta sử dụng.then() để làm điều bạn muốn sau khi vừa fetch xong. Và console.log() để kiểm tra log, giá trị được trả về.Chúng ta sử dụng. then ( ) để làm điều bạn muốn sau khi vừa fetch xong. Và console.log ( ) để kiểm tra log, giá trị được trả về .Bạn hoàn toàn có thể tìm hiểu thêm Logs NodeJS là gì ? Và tại sao nên dùng ? để hiểu rõ hơn về logconst endpoint = ” https://www.gov.uk/bank-holidays.json”;fetch(endpoint).then((response)= > console.log ( response ) ) ; Đây là hiệu quả khi triển khai xong đoạn code trên*javascript fetch apiỞ đây có phần Promise sẽ triển khai ngay khi trả về Response. Chúng ta hoàn toàn có thể kiểm tra 1 số ít thuộc tính trên đó để xem những gì tất cả chúng ta hoàn toàn có thể làm với data. Nếu bạn xem trong Promise, bạn sẽ nhận thấy loại response của tất cả chúng ta làcorsvà tất cả chúng ta dùng then sau đó. Hãy ghi nhớ điều đó. VàResponsesẽ cho tất cả chúng ta thấy kiểu JSON .Xem thêm : Cách Lấy Nét Khi Chụp Ảnh Bằng Điện Thoại Với 15 Tuyệt Chiêu Cực Chất

Thay đổi kiểu trả về với .json() tr Javascript

Bây giờ, chúng tôi sẽ sử dụng. json ( ) cho phần reponse của tất cả chúng ta và sau đó dùng ngay console.log ( ) để xem tổng thể thông tin được return trên JavaScriptconst endpoint = ” https://www.gov.uk/bank-holidays.json”;fetch(endpoint). then ( ( response ) => response.json ( ) ). then ( ( data ) => console.log ( data ) ) ; Đây là hiệu quả*hiệu quảChúng ta đã nhìn thấy hiệu quả và thuận tiện biết được chi tiết cụ thể qua console.log ( )Bạn hoàn toàn có thể xem cụ thể hơn những thuộc tính bên trong bằng cách click vào hình tam giác ngoài cùng bên trái. Đây là hiệu quả của chúng*

Kết quả lồng nhau

console.log ( ) luôn giúp bạn kiểm tra xem tài liệu trả về có đúng như bạn mông muốn hay không. Trong phần này, thông tin bạn cần chăm sóc nhất là titlt và date. Bạn muốn lấy giá trị tilte bằng cách data.england-and-wales.title. Điều này là sai vì trong england-and-wales có các dấu –. Vì vậy data.title như thế này mới là đúng, bạn sẽ lấy được title .

Lấy dữ liệu và thao tác bằng handleData()

Ở bước này không chỉ hiện như hàm console.log ( ), để hoàn toàn có thể sử dụng và hoàn toàn có thể làm mọi thứ với tài liệu tất cả chúng ta sử dụng hàm handleDataconst endpoint = ” https://www.gov.uk/bank-holidays.json”;fetch(endpoint). then ( ( response ) => response.json ( ) ). then ( ( data ) => handleData ( data ) ;

Thao tác nâng cao với hàm handleData()

Ở trong hàm handleData() trên JavaScript. Chúng ta sẽ viết đoạn code dưới vào hàm để lấy tilte và date của england-and-wales như ý bạn muốn để hiển thị và thao tác với chúng.Ở trong hàm handleData ( ) trên JavaScript. Chúng ta sẽ viết đoạn code dưới vào hàm để lấy tilte và date của england-and-wales như ý bạn muốn để hiển thị và thao tác với chúng .function handleData ( data ) { let bankHolidays = data ; / / For ease let england = bankHolidays. events ; / / Bây giờ tất cả chúng ta ánh xạ từng object bên trong ” england ” https : / / hoàn toàn có thể là kiểu mảng array hoặc đối tượng người dùng object / / Gán cho biến html để thêm từng object vào. const html = england.map ( ( items ) => { return ` $ { items.title } ( $ { date } / USD { month } / USD { year } ) ` ; } } ). join ( ” ” ) ; } ) ; Trong trường hợp break ở đây. Tất cả những gì tất cả chúng ta đang làm là ánh xạ qua sự kiện của mảng và sử dụngbackticks ( hoặc mẫu chữ ) do JavaScript 6 để chuyển các mục bên trongevent của mảng thành định dạng hoàn toàn có thể sử dụng trong HTML. Ngoài ra, vì. map ( ) trả về một mảng khác, tất cả chúng ta sử dụng. join ( ” ” ) ở cuối để trả về một chuỗi .Nếu bạn đang hoảng sợ ở đây, chỉ cần đọc. map ( ) để hoàn toàn có thể hiểu rõ hơn

Gắn dữ liệu vào trang web với .innerHTML()

Bây giờ tất cả chúng ta cóbiến html chứa toàn bộ mọi thứ cần, tất cả chúng ta thực thi điều này một cách thuận tiện bằng. innerHTML ( )HTML của tất cả chúng ta đơn thuần như sauvà tất cả chúng ta chỉ cần thêm đoạn này ở đầu đoạn script JSconst ul = document. getEuityById ( ” holiday ” ) ; và giờ đây, tất cả chúng ta thêm đoạn code sau vào function

ul.innerHTML = html;Đơn giản như vậy thôi, bạn đãfetch()API để lấy dữ liệu,chỉ cần thao tác một chút để hiển thị trong HTML theo ý của bạn.

Bạn có thể tham khảo code hoàn chỉnh tại đây:

https://codepen.io/mushroom23/pen/NOxBOM

Kết luận

Qua bài viết này, bạn hoàn toàn có thể hiểu được cách JavaScript fetch API để lấy tài liệu một cách đơn thuần. Và bạn hoàn toàn có thể biến hoá tùy chỉnh HTML xuất ra theo ý bạn dựa trên CSS .

admin