Naprawianie błędów funkcji JavaScript podczas pobierania kursów wymiany

Jak rozwiązać błędy w funkcjach pobierania szybkości JavaScript

JavaScript jest skutecznym narzędziem do tworzenia stron internetowych, szczególnie podczas pracy z zewnętrznymi API. Jednak nawet doświadczeni programiści popełniają typowe błędy podczas pisania funkcji pobierających dane z interfejsów API. Jeden z takich problemów ma miejsce podczas próby wysłania argumentów do funkcji i uzyskania w odpowiedzi niezdefiniowanych wartości.

W tym artykule omówiono trudność z napisaniem funkcji JavaScript, która pobiera kursy bitcoinów pomiędzy dwiema walutami. Problem „ReferenceError: btc is not zdefiniowany” jest często spowodowany niepoprawnie określonymi parametrami i zmiennymi. Tych obaw można uniknąć, jeśli kod ma prawidłową strukturę.

Pokażemy Ci, jak utworzyć funkcję o nazwie ruszt (od, do), który akceptuje dwa parametry i zwraca kurs wymiany pomiędzy dwiema walutami. Pod koniec tej książki będziesz wiedział, jak prawidłowo przekazywać argumenty i zarządzać błędami podczas procesów pobierania danych.

Jeśli doświadczasz podobnych problemów lub otrzymałeś błąd „Nie można odczytać właściwości niezdefiniowanej (odczytywanie „szybkości”)”, ten artykuł pomoże Ci skutecznie je rozwiązać. Przyjrzyjmy się krok po kroku, jak rozwiązać te problemy.

Zrozumienie, w jaki sposób funkcje JavaScript obsługują żądania API dotyczące kursów kryptowalut

Dostarczone tutaj skrypty demonstrują alternatywne techniki uzyskiwania kursów wymiany kryptowalut pomiędzy dwiema walutami za pomocą JavaScript. Pierwszy skrypt korzysta z obiektu XMLHttpRequest, który jest jedną ze starszych technik obsługi asynchronicznych żądań HTTP w JavaScript. Funkcja ruszt (od, do) akceptuje dwa parametry: waluty do przeliczenia. Adres URL jest generowany dynamicznie na podstawie dostarczonych parametrów, a żądanie jest wysyłane do punktu końcowego API Bitpay. Po uzyskaniu odpowiedzi dane są analizowane za pomocą JSON.parse() wyświetla kurs wymiany w treści dokumentu. To rozwiązanie zachowuje kompatybilność ze starszymi przeglądarkami, brakuje jednak niektórych nowszych możliwości, takich jak obietnice, które zostały omówione w drugim przykładzie.

W drugim przykładzie do wykonania tej samej akcji zamiast XMLHttpRequest zastosowano Fetch API. Fetch API jest bardziej aktualny i oferuje łatwiejszy sposób wysyłania żądań sieciowych. Wykorzystuje obietnice, dzięki którym przepływ asynchroniczny będzie bardziej czytelny i łatwiejszy w zarządzaniu. Po wywołaniu funkcja wysyła żądanie HTTP do tego samego adresu URL i czeka na odpowiedź. Po otrzymaniu odpowiedzi zamienia dane na obiekt JSON i uzyskuje szybkość. Fetch API usprawnia zarządzanie błędami, wykorzystując bloki try/catch do gromadzenia i zarządzania wszelkimi problemami, które pojawiają się podczas żądania lub przetwarzania danych.

Trzeci skrypt jest skierowany do a środowisko backendowe i tworzy zapytania API za pomocą modułu HTTP Node.js. Jest to szczególnie korzystne w przypadku tworzenia aplikacji po stronie serwera, które wymagają pobierania kursów wymiany. Moduł HTTP jest wbudowany w Node.js i umożliwia programistom przeprowadzanie operacji HTTP. Ta funkcja tworzy adres URL w taki sam sposób jak poprzednie skrypty, wysyła wywołanie GET do API, a następnie analizuje otrzymane dane. Wynik jest rejestrowany w konsoli, a nie wyświetlany w przeglądarce, dzięki czemu lepiej nadaje się do scenariuszy zaplecza, które nie wymagają przeglądarek internetowych.

Na koniec dołączono zestaw testów Jest, który pozwala sprawdzić, czy rozwiązanie Fetch API działa prawidłowo. Jest to popularny framework testowy, a wraz z nim żartuję, możemy w naszych testach imitować odpowiedzi API. Umożliwia to programistom testowanie kodu bez generowania zapytań sieciowych, co przyspiesza proces testowania i izoluje potencjalne błędy. Testy sprawdzają, czy dane dotyczące stawki zostały pomyślnie uzyskane i wyświetlone w treści dokumentu, potwierdzając, że funkcja działa zgodnie z oczekiwaniami w różnych kontekstach. Testowanie jest ważnym elementem rozwoju, szczególnie podczas pracy z zewnętrznymi API, ponieważ pomaga wcześnie wykryć błędy i poprawia ogólną stabilność produktu.

// 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');
});

Odkrywanie asynchronicznych funkcji JavaScript dla żądań API

Obsługa żądań asynchronicznych jest kluczowa podczas pracy z interfejsami API w JavaScript. Fetch API i XMLHttpRequest to dwa podstawowe sposoby tworzenia takich żądań. Celem funkcji asynchronicznych jest zapobieganie zawieszaniu się przeglądarki lub serwera podczas oczekiwania na odpowiedź, poprawiając w ten sposób wygodę użytkownika i wydajność. Zrozumienie zachowania asynchronicznego umożliwia programistom tworzenie bardziej responsywnych aplikacji, które mogą pobierać dane z interfejsów API w czasie rzeczywistym bez wpływu na główny wątek.

Obsługa żądań asynchronicznych wymaga zarządzania odpowiedziami i różnymi błędami, które mogą pojawić się w trakcie procesu. Na przykład częstą trudnością podczas pobierania danych z zewnętrznych interfejsów API jest zwracanie niezdefiniowanej wartości, o czym świadczy błąd w początkowym przypadku. Jeśli programiści nie będą skutecznie zarządzać wyjątkami, ich aplikacja może ulec awarii lub generować niedokładne wyniki. Skuteczna obsługa błędów, takich jak bloki try/catch lub sprawdzanie stanu odpowiedzi, ma kluczowe znaczenie.

Oprócz obsługi błędów, bezpieczeństwo jest ważnym czynnikiem podczas interakcji z zewnętrznymi interfejsami API. Ujawnianie wrażliwych danych lub udzielanie bezpośredniego dostępu do interfejsów API bez weryfikacji może skutkować powstaniem luk w zabezpieczeniach. Jednym z rozwiązań jest wdrożenie żądań po stronie serwera, w których wywołania API są realizowane z serwera backendowego, zapewniając dodatkowy stopień bezpieczeństwa. Uniemożliwia to złośliwym aktorom zakłócanie żądań front-endu lub bezpośrednie uzyskiwanie wrażliwych danych za pośrednictwem przeglądarki. Zabezpieczenie tych połączeń API ma kluczowe znaczenie, szczególnie w przypadku informacji finansowych, takich jak kursy bitcoinów.