Виправлення помилок функції JavaScript під час отримання курсів валют

Як усунути помилки у функціях отримання швидкості JavaScript

JavaScript є ефективним інструментом для веб-розробки, особливо під час роботи із зовнішніми API. Однак навіть досвідчені розробники роблять типові помилки при написанні функцій для отримання даних з API. Одна з таких проблем виникає під час спроби надіслати аргументи у функцію та отримати у відповідь невизначені значення.

У цій статті обговорюється проблема з написанням функції JavaScript, яка отримує курси біткойнів між двома валютами. Проблема «ReferenceError: btc не визначено» часто виникає через неправильно вказані параметри та змінні. Цих проблем можна уникнути, якщо правильно структурувати код.

Ми покажемо вам, як створити функцію з назвою решітка (від, до), який приймає два параметри та повертає обмінний курс між двома валютами. До кінця цієї книги ви будете знати, як правильно передавати аргументи та керувати помилками під час процесів отримання даних.

Якщо у вас виникли подібні проблеми або ви отримали повідомлення про помилку «Неможливо прочитати властивості undefined (читання «швидкість»)», ця стаття допоможе вам усунути неполадки та ефективно їх вирішити. Давайте крок за кроком розглянемо, як вирішити ці проблеми.

Розуміння того, як функції JavaScript обробляють запити API щодо курсів криптовалют

Надані тут сценарії демонструють альтернативні методи отримання курсів обміну криптовалют між двома валютами за допомогою JavaScript. Перший сценарій використовує об’єкт XMLHttpRequest, який є одним із старих методів обробки асинхронних HTTP-запитів у JavaScript. Функція решітка (від, до) приймає два параметри: валюти для конвертації. URL-адреса генерується динамічно на основі наданих параметрів, а запит надсилається до кінцевої точки API Bitpay. Після отримання відповіді дані аналізуються за допомогою JSON.parse() відображає обмінний курс у тілі документа. Це рішення підтримує сумісність зі старими браузерами, але йому бракує деяких новіших можливостей, таких як обіцянки, які обговорюються в другому прикладі.

У другому прикладі Fetch API використовується замість XMLHttpRequest для виконання тієї ж дії. Fetch API є сучаснішим і пропонує простіший спосіб надсилання мережевих запитів. Він використовує обіцянки зробити асинхронний потік більш читабельним і керованим. Коли функція викликається, вона надсилає HTTP-запит на ту саму URL-адресу та чекає на відповідь. Отримавши відповідь, він перетворює дані на об’єкт JSON і отримує швидкість. Fetch API покращує керування помилками, використовуючи блоки try/catch для збору й керування будь-якими проблемами, які виникають під час запиту чи обробки даних.

Третій сценарій націлений на a серверне середовище і робить запити API за допомогою модуля HTTP Node.js. Це особливо корисно для розробки програм на стороні сервера, яким потрібно отримувати курси валют. Модуль HTTP вбудований у Node.js і дозволяє розробникам виконувати операції HTTP. Ця функція створює URL-адресу так само, як і попередні сценарії, надсилає виклик GET до API, а потім аналізує отримані дані. Результат реєструється в консолі, а не відображається в браузері, що робить його кращим для сценаріїв серверної частини, які не потребують веб-браузерів.

Нарешті, включено набір тестів Jest для перевірки правильності роботи рішення Fetch API. Jest — популярний фреймворк для тестування жарт-принести-знущатися, ми можемо імітувати відповіді API у наших тестах. Це дозволяє розробникам тестувати свій код без фактичного створення мережевих запитів, що прискорює процес тестування та ізолює потенційні помилки. Тести підтверджують, що дані про швидкість успішно отримані та відображені в тілі документа, підтверджуючи, що функція працює належним чином у різних контекстах. Тестування є важливим елементом розробки, особливо під час роботи із зовнішніми API, оскільки воно допомагає виявляти помилки на ранній стадії та покращує загальну стабільність продукту.

// Solution 1: Using XMLHTTPRequest to fetch cryptocurrency rates
function grate(from, to) {
  var burl = 'https://bitpay.com/rates/';
  var url = burl + from + '/' + to;
  var ourRequest = new XMLHttpRequest();
  ourRequest.open('GET', url, true);
  ourRequest.onload = function() {
    if (ourRequest.status >= 200 && ourRequest.status < 400) {
      var response = JSON.parse(ourRequest.responseText);
      document.body.innerHTML = 'Rate: ' + response.data.rate;
    } else {
      console.error('Error fetching the data');
    }
  };
  ourRequest.onerror = function() {
    console.error('Connection error');
  };
  ourRequest.send();
}
// Test the function with actual currency codes
grate('btc', 'usd');

// Solution 2: Using Fetch API for cleaner asynchronous requests
async function grate(from, to) {
  var burl = 'https://bitpay.com/rates/';
  var url = burl + from + '/' + to;
  try {
    let response = await fetch(url);
    if (!response.ok) throw new Error('Network response was not ok');
    let data = await response.json();
    document.body.innerHTML = 'Rate: ' + data.data.rate;
  } catch (error) {
    console.error('Fetch error: ', error);
  }
}
// Test the function with Fetch API
grate('btc', 'usd');

// Solution 3: Using Node.js HTTP module to fetch data from API
const http = require('http');
function grate(from, to) {
  const url = 'http://bitpay.com/rates/' + from + '/' + to;
  http.get(url, (resp) => {
    let data = '';
    resp.on('data', (chunk) => { data += chunk; });
    resp.on('end', () => {
      let rateData = JSON.parse(data);
      console.log('Rate: ' + rateData.data.rate);
    });
  }).on('error', (err) => {
    console.log('Error: ' + err.message);
  });
}
// Test the Node.js function
grate('btc', 'usd');

// Solution 4: Unit testing Fetch API using Jest
const fetchMock = require('jest-fetch-mock');
fetchMock.enableMocks();
test('grate() fetches correct rate data', async () => {
  fetch.mockResponseOnce(JSON.stringify({ data: { rate: 50000 }}));
  const rate = await grate('btc', 'usd');
  expect(document.body.innerHTML).toBe('Rate: 50000');
});

Вивчення асинхронних функцій JavaScript для запитів API

Обробка асинхронних запитів має вирішальне значення під час роботи з API у JavaScript. Fetch API і XMLHttpRequest є двома основними способами для створення цих запитів. Мета асинхронних функцій — запобігти зависанню браузера або сервера під час очікування відповіді, отже покращуючи взаємодію з користувачем і продуктивність. Розуміння асинхронної поведінки дозволяє розробникам створювати більш чуйні програми, які можуть отримувати дані з API у режимі реального часу, не впливаючи на основний потік.

Обробка асинхронних запитів вимагає керування відповідями та різними помилками, які можуть виникнути під час процесу. Наприклад, однією з поширених проблем під час отримання даних із зовнішніх API є повернення невизначеного значення, про що свідчить помилка у початковому випадку. Якщо розробникам не вдається ефективно керувати винятками, їхня програма може вийти з ладу або дати неточні результати. Ефективна обробка помилок, наприклад блокування спроб/перехоплення або перевірка статусу відповіді, має вирішальне значення.

Крім обробки помилок, безпека є важливим фактором під час взаємодії із зовнішніми API. Розкриття конфіденційних даних або надання прямого доступу до API без перевірки може призвести до вразливості. Одним із рішень є реалізація запитів на стороні сервера, у яких виклики API здійснюються з внутрішнього сервера, що забезпечує додатковий рівень безпеки. Це забороняє зловмисникам втручатися у зовнішні запити або безпосередньо отримувати конфіденційні дані через браузер. Захист цих API-з’єднань є критично важливим, особливо коли ви маєте справу з фінансовою інформацією, як-от курси біткойнів.