- Nhà
- Nút JS
- Hướng dẫn sử dụng JavaScript để lấy API tìm nạp dữ liệu từ Ngân hàng Vương quốc Anh
2 năm trước 2 năm trước
Nút JS
Phổ biến vui vẻ chiến thắng
Hướng dẫn sử dụng JavaScript để lấy API tìm nạp dữ liệu từ Ngân hàng Vương quốc AnhTrong 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 tìm nạp () và sau đó chuyển dữ liệu vào trang web. 4 phút
bởi Vũ Đức Phương 2 năm trước 2 năm trước
9. 7klượt xem
1088
- 1. 9K cổ phiếu
1. 9k lượt chia sẻ, 1088 điểm
nội dung
Nguồn dữ liệu
Nguồn dữ liệu chúng ta sẽ sử dụng cho API JSON https. //www. chính phủ. uk/bank-kỳ nghỉ. json
Khai báo
Trong JavaScript, đầu tiên chúng ta phải khai báo để dễ dàng thao tác bên dưới
// Khai báo một biến, để dễ thao tác const endpoint = ' //www.gov.uk/bank-holiday.json'; // đơn giản vậy thôi. fetch(endpoint)Check tra value with console. nhật ký()
Chúng ta sử dụng .then() để làm điều bạn muốn sau khi vừa tìm nạp xong. And console. log() để kiểm tra nhật ký, giá trị được trả về
Bạn có thể tham khảo Logs NodeJS là gì ?
const endpoint = '//www.gov.uk/bank-holidays.json'; fetch(endpoint) .then((response)=>console.log(response));Đây là kết quả khi thực hiện xong đoạn mã trên
Ở đây có phần Lời hứa sẽ thực hiện ngay khi trả lại Phản hồi. Chúng ta có thể kiểm tra một số thuộc tính trên đó để xem chúng ta có thể làm gì với dữ liệu. Nếu bạn xem trong Promise, bạn sẽ nhận thấy loại phản hồi của chúng tôi là const endpoint = '//www.gov.uk/bank-holidays.json'; fetch(endpoint) .then((response)=>console.log(response));0và chúng tôi sử dụng const endpoint = '//www.gov.uk/bank-holidays.json'; fetch(endpoint) .then((response)=>console.log(response));1 sau đó. Please ghi nhớ điều đó. And _const endpoint = '//www.gov.uk/bank-holidays.json'; fetch(endpoint) .then((response)=>console.log(response));2 will for them ta found JSON type
Change return type with. json() tr Javascript
Bây giờ, chúng tôi sẽ sử dụng const endpoint = '//www.gov.uk/bank-holidays.json'; fetch(endpoint) .then((response)=>console.log(response));3 cho phần phản hồi của chúng tôi và sau đó sử dụng ngay bảng điều khiển. log() to see all information are return on JavaScript
const endpoint = '//www.gov.uk/bank-holidays.json'; fetch(endpoint) .then((response) => response.json()) .then((data) => console.log(data));This is results
Chúng ta đã nhìn thấy kết quả và dễ dàng biết được thông tin chi tiết qua bảng điều khiển. nhật ký()
Bạn có thể xem chi tiết hơn các thuộc tính bên trong bằng cách nhấp vào hình tam giác bên ngoài cùng bên trái. This is results of them
bảng điều khiển. log() luôn giúp bạn kiểm tra xem dữ liệu trả về có đúng như bạn muốn hay không. Trong phần này, thông tin bạn cần quan tâm nhất là tiêu đề và ngày tháng. Bạn muốn lấy giá trị nghiêng bằng cách dữ liệu. Anh và xứ Wales. chức vụ. Điều này là sai vì ở england-and-wales có các dấu –. Vì vậy data[england-and-wales]. tiêu đề như thế này mới là đúng, bạn sẽ nhận được tiêu đề
Lấy dữ liệu và thao tác bằng handleData()
Ở bước này không chỉ xuất hiện như bảng điều khiển chức năng. log(), to be used and could doing every second with data they ta use function handleData
const endpoint = '//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()
At in handleData() function on JavaScript. Chúng ta sẽ viết đoạn mã bên dưới vào hàm để lấy nghiêng và ngày của england-and-wales theo ý muốn của bạn để hiển thị và thao tác với chúng
________số 8_______Trong trường hợp ngắt ở đây. Tất cả những gì chúng ta đang làm là ánh xạ qua sự kiện của mảng và sử dụng backticks (hoặc mẫu chữ) do JavaScript 6 để chuyển các mục bên trong const endpoint = '//www.gov.uk/bank-holidays.json'; fetch(endpoint) .then((response)=>console.log(response));4 của mảng thành định dạng có thể sử dụng trong HTML. Ngoài ra, vì const endpoint = '//www.gov.uk/bank-holidays.json'; fetch(endpoint) .then((response)=>console.log(response));5trả về một mảng khác, chúng ta sử dụng const endpoint = '//www.gov.uk/bank-holidays.json'; fetch(endpoint) .then((response)=>console.log(response));6ở cuối để trả về một chuỗi
Nếu bạn đang gặp rắc rối ở đây, chỉ cần đọc const endpoint = '//www.gov.uk/bank-holidays.json'; fetch(endpoint) .then((response)=>console.log(response));7 để có thể hiểu rõ hơn
Mount data into the web page with. bên trongHTML()
Bây giờ chúng ta có biến const endpoint = '//www.gov.uk/bank-holidays.json'; fetch(endpoint) .then((response)=>console.log(response));8 chứa tất cả mọi thứ cần thiết , chúng ta thực hiện điều này một cách dễ dàng bằng const endpoint = '//www.gov.uk/bank-holidays.json'; fetch(endpoint) .then((response)=>console.log(response));9)
HTML of them ta menu as after
<ul id='holidays'> </ul>và chúng ta chỉ cần thêm đoạn này vào đầu đoạn script JS
const ul = document.getEuityById ('holiday');và bây giờ, chúng ta thêm đoạn mã sau vào chức năng
ul.innerHTML = html;Đơn giản như vậy thôi, bạn đã const endpoint = '//www.gov.uk/bank-holidays.json'; fetch(endpoint) .then((response) => response.json()) .then((data) => console.log(data));0API để 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 mã hoàn chỉnh tại đây.
https. // codepen. io/nấm23/bút/NOxBOM
Kết luận
Qua bài viết này, bạn có thể hiểu được cách JavaScript tìm nạp API để lấy dữ liệu một cách đơn giản. Và bạn có thể biến tùy chỉnh HTML xuất ra theo ý bạn dựa trên CSS