Исправление ошибок функции JavaScript при получении курсов валют

Как устранить ошибки в функциях получения скорости JavaScript

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

В этой статье обсуждаются трудности с написанием функции JavaScript, которая извлекает курсы биткойнов между двумя валютами. Проблема «ReferenceError: btc не определен» часто возникает из-за неправильно указанных параметров и переменных. Этих проблем можно избежать, если код правильно структурирован.

Мы покажем вам, как создать функцию с именем решетка (от, куда), который принимает два параметра и возвращает обменный курс между двумя валютами. К концу этой книги вы будете знать, как правильно передавать аргументы и управлять ошибками в процессах выборки данных.

Если вы столкнулись с подобными проблемами или получили сообщение об ошибке «Невозможно прочитать свойства неопределенного значения (чтение «скорости»)», эта статья поможет вам устранить и эффективно устранить неполадки. Давайте поэтапно рассмотрим, как решить эти проблемы.

Понимание того, как функции JavaScript обрабатывают запросы API о курсах криптовалют

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

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

Третий скрипт нацелен на серверная среда и выполняет запросы 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 является возврат неопределенного значения, о чем свидетельствует ошибка в первом случае. Если разработчики не могут эффективно управлять исключениями, их приложение может аварийно завершить работу или выдать неточные результаты. Эффективная обработка ошибок, такая как блоки try/catch или проверки статуса ответа, имеет решающее значение.

Помимо обработки ошибок, при взаимодействии с внешними API важным фактором является безопасность. Раскрытие конфиденциальных данных или предоставление прямого доступа к API без проверки может привести к уязвимостям. Одним из решений является реализация запросов на стороне сервера, при которых вызовы API выполняются с внутреннего сервера, что обеспечивает дополнительную степень безопасности. Это запрещает злоумышленникам вмешиваться в запросы внешнего интерфейса или напрямую получать конфиденциальные данные через браузер. Защита этих API-соединений имеет решающее значение, особенно при работе с финансовой информацией, такой как курсы биткойнов.