Api — cách lấy api của 1 trang web api, sử dụng các api của google trong website
Trong nội dung bài viết này, tôi đã trình diễn một ví dụ đơn giản và dễ dàng về cách mang dữ liệu bằng JavaScript từ bỏ API bằng cách tiến hành fetch () với tiếp nối đổ tài liệu vào trang web.
Bạn đang xem: Api — cách lấy api của 1 trang web api, sử dụng các api của google trong website
Nguồn dữ liệu
Nguồn dữ liệu bọn họ đang sử dụng mang đến API JSON https://www.gov.uk/bank-holiday.json
Khai báo
Trong JavaScript, đầu tiên họ nên knhị báo nhằm dễ dàng thao tác làm việc phía dưới.
// Knhị báo một phát triển thành, để dễ dàng thao tácconst endpoint = " https://www.gov.uk/bank-holiday.json";// dễ dàng và đơn giản vậy thôi.fetch(endpoint)
Kiểu tra quý giá cùng với console.log()
Chúng ta áp dụng.then() để triển khai điều bạn có nhu cầu sau khi vừa fetch dứt. Và console.log() nhằm soát sổ log, cực hiếm được trả về.quý khách hàng rất có thể xem thêm Logs NodeJS là gì ? Và vì sao yêu cầu sử dụng ? nhằm hiểu rõ rộng về log
const endpoint = "https://www.gov.uk/bank-holidays.json";fetch(endpoint).then((response)=>console.log(response));Đây là công dụng khi tiến hành xong xuôi đoạn code trên
Ở phía trên bao gồm phần Promise sẽ triển khai ngay lúc trả về Response.Chúng ta có thể soát sổ một trong những ở trong tính trên kia để thấy các gì chúng ta có thể làm cho với data .Nếu chúng ta xem trong Promise, các bạn sẽ phân biệt loại response của bọn họ làcorsvới chúng ta cần sử dụng then sau đó.Hãy ghi lưu giữ điều đó .VàResponsesẽ mang lại chúng ta thấy kiểu dáng JSON.
Xem thêm: Cách Thay Đổi Hình Nền Trên Gmail Trên Điện Thoại Từ A, Thay Đổi Ảnh Hồ Sơ Gmail
Txuất xắc thay đổi phong cách trả về cùng với .json() tr Javascript
Bây giờ đồng hồ, chúng tôi sẽ sử dụng.json() cho phần reponse của họ với sau đó dùng ngay lập tức console.log() để thấy tất cả thông báo được return bên trên JavaScript
const endpoint = "https://www.gov.uk/bank-holidays.json";fetch(endpoint) .then((response) => response.json()) .then((data) => console.log(data));Đây là công dụng
Chúng ta đã nhìn thấy hiệu quả với thuận tiện hiểu rằng cụ thể qua console.log()
quý khách hoàn toàn có thể xem chi tiết rộng đông đảo thuộc tính bên phía trong bằng phương pháp clichồng vào hình tam giác quanh đó thuộc phía trái. Đây là công dụng của chúng
console.log() luôn luôn giúp bạn đánh giá xem tài liệu trả về gồm đúng như các bạn mông mong muốn hay là không.Trong phần này, ban bố bạn cần quan tâm tuyệt nhất là titlt và date.Quý Khách muốn rước quý hiếm tilte bằng cách data.england-and-wales.title . Như vậy là không đúng vày vào england-and-wales có những lốt – . Vì vậy data
Lấy dữ liệu cùng thao tác bởi handleData()
Ở bước này không những hiện nhỏng hàm console.log(), để rất có thể thực hiện với có thể làm cho hầu hết đồ vật với tài liệu chúng ta áp dụng hàm handleData
const endpoint = "https://www.gov.uk/bank-holidays.json";fetch(endpoint) .then((response) => response.json()) .then((data) => handleData(data);
Thao tác nâng cao cùng với hàm handleData()
Ở vào hàm handleData() trên JavaScript. Chúng ta đã viết đoạn code bên dưới vào hàm để mang tilte và date của england-and-wales may mắn bạn có nhu cầu để hiển thị cùng làm việc cùng với bọn chúng.function handleData(data) let bankHolidays = data; //For ease let englvà = bankHolidays<"england-and-wales">.events;// Bây tiếng bọn họ ánh xạ từng object mặt trong"england"https:// hoàn toàn có thể là hình dạng mảng array hoặc đối tượng object// Gán cho vươn lên là html để thêm từng object vào.const html = engl&.map((items) =>return ` $items.title ($date / $month / $year) `; ).join(""); });Trong ngôi trường phù hợp break ở đây.Tất cả hầu như gì họ đang làm cho là ánh xạ qua event của mảng cùng sử dụngbackticks (hoặc mẫu chữ)bởi JavaScript 6 để đưa các mục bên trongevent của mảng thành định dạng hoàn toàn có thể áp dụng trong HTML .Ngoài ra, vì chưng.map()trả về một mảng khác, họ thực hiện.join("")sinh hoạt cuối để trả về một chuỗi.
Nếu nhiều người đang bối rối tại chỗ này, chỉ cần đọc.map() để rất có thể hiểu rõ hơn
Gắn tài liệu vào website cùng với .innerHTML()
Bây giờ đồng hồ họ cóđổi thay html cất tất cả gần như sản phẩm công nghệ yêu cầu , họ triển khai vấn đề này một biện pháp dễ dãi bởi.innerHTML()
HTML của chúng ta đơn giản nhỏng sau
và bọn họ chỉ việc thêm đoạn này làm việc đầu đoạn script JS
const ul = document.getEuityById ("holiday");với hiện nay, chúng ta thêm đoạn code sau vào function
ul.innerHTML = html;Đơn giản những điều đó thôi, bạn đãfetch()API để mang dữ liệu,chỉ cần làm việc một ít nhằm hiển thị vào HTML theo ý của chúng ta.
Bạn hoàn toàn có thể tham khảo code hoàn hảo trên đây:
https://codepen.io/mushroom23/pen/NOxBOM
Kết luận
Qua nội dung bài viết này, bạn cũng có thể gọi được biện pháp JavaScript fetch API để đưa dữ liệu một phương pháp dễ dàng. Và chúng ta cũng có thể biến hóa hoá tùy chỉnh thiết lập HTML xuất ra theo ý chúng ta dựa vào CSS.
Chuyên mục: Domain Hosting
