Спосіб використання ES Module за допомогою JSCroot з імпортом функцій GetJSON, SetInner, CORS

Цього разу я розповім про те, як використовувати функції GetJSON та SetInner з бібліотеки JSCroot, а також про використання CORS.

1. Початковий крок — відкрийте JSCroot, натисніть тут, щоб перейти на сторінку веб-сайту JSCroot. Тут ви зможете побачити, як використовувати цю бібліотеку.
2. Потім ми отримаємо модуль з бібліотеки, що знаходиться в jscroot. Для цього натисніть тут, щоб відкрити бібліотеку JSCroot.
3. Відкрийте існуючий файл/проект або створіть новий, файл повинен містити .html та .js, як показано на зображенні нижче.

Зображення файлів, які є в папці

1. Тепер ми імпортуємо функцію getJSON з бібліотеки jscroot. Відкрийте бібліотеку JSCroot за посиланням, яке було відкрито раніше, посилання на бібліотеку було вказано на кроці 2.

Зображення бібліотеки JSCroot

Скопіюйте URL з частини api.js

Далі відкрийте редактор коду та напишіть "import { getJSON } from “ "; " у файлі .js, потім вставте скопійоване посилання в " " в частині import, як показано нижче.

1. Потім ми викликаємо функцію getJSON, яку щойно імпортували. Напишіть “getJSON(target_url, tokenkey, tokenvalue, responseFunction)” для виклику функції getJSON.

Як показано вище, тепер змініть target_url на URL API, з якого ви хочете отримати дані. Я беру дані з URL: https://nomp.mofumofu.me/api/worker_stats?sugar1qkyetyz6uypmuqaxd8hs763ymv40uk4negh30yt

Тепер tokenkey та tokenvalue залишаються null, оскільки ці параметри не використовуються.

1. Тепер ми оголошуємо змінну “responseFunction”, яка використовується в getJSON, і вона виглядає ось так.

Пояснення:

• responseFunction(response): Ця функція буде викликана після того, як getJSON завершить отримання даних. Параметр response містить інформацію про результат запиту.
• console.log: Використовується для виведення статусу HTTP та даних відповіді в консоль для налагодження.

1. Перевірка статусу відповіді

• if (response.status === 200): Перевіряє, чи є статус відповіді 200, що вказує на успішний запит.
• const data = response.data;: Якщо запит успішний, отримані дані JSON зберігаються в змінній data.

1. Підготовка HTML контенту

Пояснення:

• Змінна konten заповнюється рядком HTML, що містить інформацію, отриману з об'єкта data. У цьому випадку, data є об'єктом, що містить інформацію про майнера, хешрейт, баланс і виплати.
• Кожен рядок у шаблоні літералів створює HTML-елемент <p> (параграф), який відображає відповідну інформацію:
  • Miner: Показує ім'я майнера/гаманця/інше.
  • Hashrate: Показує дані хешрейту в одиницях H/s (хешів на секунду).
  • Balance: Показує баланс.
  • Paid: Показує дані виплат.
• ${data.miner}, ${data.hashrate}, ${data.balance}, та ${data.paid} — це приклади інтерполяції змінних. Це дозволяє вставляти значення з об'єкта data безпосередньо в рядок HTML.

9.
Зміна контенту HTML

Пояснення:

• setInner("miner", konten): Викликає функцію setInner, щоб змінити вміст елемента HTML з ID "miner" на підготовлений контент.

• Тепер вміст елемента з ID "miner" буде заповнений підготовленим контентом.

1. Налаштування CORS

Перший крок — завантажити розширення allow-CORS. Після цього увімкніть розширення, натиснувши на значок. Якщо воно увімкнене, виглядатиме ось так:

Далі натисніть на “open options page”. Це відкриє наступне вікно:

Переконайтесь, що на номері 3 є “чекбокс”, а на номері 5 — “ * ”

Прокрутіть до самого низу, як показано на зображенні:

Введіть домен URL, який ви вказали на номері 8.

Тепер те, що виглядало так до використання allow-CORS, виглядатиме ось так:

Цей результат — це вміст змінної, яку ми щойно викликали.

Як вам? Кодування — це легко та весело, чи не так??

Ось і все для цього туторіалу, вибачте, якщо були помилки. Дякую😊

Перекладено з: Cara Penggunaan ES Module Menggunakan JSCroot dengan Import Fungsi GetJSON, SetInner, CORS