Behebung von JavaScript-Funktionsfehlern beim Abrufen von Wechselkursen

So beheben Sie Fehler in JavaScript-Ratenabruffunktionen

JavaScript ist ein effektives Werkzeug für die Webentwicklung, insbesondere bei der Arbeit mit externen APIs. Allerdings machen selbst erfahrene Entwickler typische Fehler beim Schreiben von Funktionen zum Abrufen von Daten aus APIs. Ein solches Problem tritt auf, wenn versucht wird, Argumente an eine Funktion zu senden und als Antwort undefinierte Werte zu erhalten.

In diesem Artikel wird eine Schwierigkeit beim Schreiben einer JavaScript-Funktion erläutert, die Bitcoin-Kurse zwischen zwei Währungen abruft. Das Problem „ReferenceError: btc ist nicht definiert“ wird häufig durch falsch angegebene Parameter und Variablen verursacht. Diese Bedenken können vermieden werden, wenn der Code richtig strukturiert ist.

Wir zeigen Ihnen, wie Sie eine Funktion mit dem Namen erstellen reiben (von, bis), das zwei Parameter akzeptiert und den Wechselkurs zwischen den beiden Währungen zurückgibt. Am Ende dieses Buches wissen Sie, wie Sie Argumente richtig übergeben und Fehler bei Datenabrufprozessen verwalten.

Wenn Sie auf ähnliche Probleme stoßen oder die Fehlermeldung „Eigenschaften von undefiniert (reading ‚rate‘) können nicht gelesen werden“ erhalten, hilft Ihnen dieser Artikel bei der Fehlerbehebung und effektiven Lösung. Sehen wir uns Schritt für Schritt an, wie Sie diese Probleme beheben können.

Verstehen, wie JavaScript-Funktionen API-Anfragen für Kryptowährungskurse verarbeiten

Die hier bereitgestellten Skripte demonstrieren alternative Techniken, um Kryptowährungswechselkurse zwischen zwei Währungen mithilfe von JavaScript zu ermitteln. Das erste Skript nutzt das XMLHttpRequest-Objekt, eine der älteren Techniken zur Verarbeitung asynchroner HTTP-Anfragen in JavaScript. Die Funktion reiben (von, bis) akzeptiert zwei Parameter: die umzurechnenden Währungen. Basierend auf den bereitgestellten Parametern wird dynamisch eine URL generiert und eine Anfrage an den API-Endpunkt von Bitpay gesendet. Nach Erhalt der Antwort werden die Daten mit JSON.parse() analysiert. Zeigt den Wechselkurs im Dokumentkörper an. Diese Lösung behält die Kompatibilität mit älteren Browsern bei, es fehlen jedoch einige neuere Funktionen wie Versprechen, die im zweiten Beispiel besprochen werden.

Im zweiten Beispiel wird die Fetch-API anstelle von XMLHttpRequest verwendet, um dieselbe Aktion auszuführen. Die Fetch-API ist aktueller und bietet eine einfachere Möglichkeit, Netzwerkanfragen zu stellen. Es nutzt Versprechen, den asynchronen Fluss lesbarer und verwaltbarer zu machen. Wenn die Funktion aufgerufen wird, stellt sie eine HTTP-Anfrage an dieselbe URL und wartet auf eine Antwort. Nach Erhalt der Antwort werden die Daten in ein JSON-Objekt umgewandelt und die Rate ermittelt. Die Fetch-API verbessert das Fehlermanagement, indem sie Try/Catch-Blöcke verwendet, um alle Probleme zu sammeln und zu verwalten, die während der Anfrage oder Datenverarbeitung auftreten.

Das dritte Skript zielt auf a Backend-Umgebung und führt API-Abfragen mit dem HTTP-Modul von Node.js durch. Dies ist besonders vorteilhaft für die Entwicklung serverseitiger Apps, die Wechselkurse abrufen müssen. Das HTTP-Modul ist in Node.js integriert und ermöglicht Entwicklern die Durchführung von HTTP-Vorgängen. Diese Funktion erstellt die URL auf die gleiche Weise wie die vorherigen Skripte, sendet einen GET-Aufruf an die API und analysiert dann die empfangenen Daten. Das Ergebnis wird in der Konsole protokolliert und nicht im Browser angezeigt, wodurch es besser für Backend-Szenarien geeignet ist, die keine Webbrowser erfordern.

Schließlich ist eine Jest-Testsuite enthalten, um zu überprüfen, ob die Fetch-API-Lösung ordnungsgemäß funktioniert. Jest ist ein beliebtes Test-Framework und mit Scherz-holen-Mockkönnen wir API-Antworten in unseren Tests nachahmen. Dadurch können Entwickler ihren Code testen, ohne tatsächlich Netzwerkabfragen zu generieren, was den Testprozess beschleunigt und potenzielle Fehler isoliert. Die Tests überprüfen, ob die Tarifdaten erfolgreich abgerufen und im Dokumenttext angezeigt werden, und bestätigen, dass die Funktion in verschiedenen Kontexten wie beabsichtigt funktioniert. Das Testen ist ein wichtiger Bestandteil der Entwicklung, insbesondere bei der Arbeit mit externen APIs, da es dabei hilft, Fehler frühzeitig zu erkennen und die Gesamtstabilität des Produkts zu verbessern.

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

Erkunden asynchroner JavaScript-Funktionen für API-Anfragen

Der Umgang mit asynchronen Anfragen ist bei der Arbeit mit APIs in JavaScript von entscheidender Bedeutung. Die Fetch-API und XMLHttpRequest sind die beiden grundlegenden Möglichkeiten, diese Anfragen zu stellen. Der Zweck asynchroner Funktionen besteht darin, zu verhindern, dass der Browser oder Server beim Warten auf eine Antwort einfriert, und so das Benutzererlebnis und die Leistung zu verbessern. Das Verständnis des asynchronen Verhaltens ermöglicht es Entwicklern, reaktionsfähigere Anwendungen zu erstellen, die Daten von APIs in Echtzeit abrufen können, ohne den Hauptthread zu beeinträchtigen.

Die Bearbeitung asynchroner Anfragen erfordert die Verwaltung von Antworten und verschiedenen Fehlern, die während des Prozesses auftreten können. Eine häufige Schwierigkeit beim Abrufen von Daten von externen APIs besteht beispielsweise darin, einen undefinierten Wert zurückzugeben, wie der Fehler im Ausgangsfall zeigt. Wenn es Entwicklern nicht gelingt, Ausnahmen effektiv zu verwalten, kann ihre Anwendung abstürzen oder ungenaue Ergebnisse liefern. Eine effektive Fehlerbehandlung, wie Try/Catch-Blöcke oder Antwortstatusprüfungen, ist von entscheidender Bedeutung.

Neben der Fehlerbehandlung ist die Sicherheit ein wichtiger Gesichtspunkt bei der Interaktion mit externen APIs. Das Offenlegen sensibler Daten oder das Gewähren des direkten Zugriffs auf APIs ohne Validierung kann zu Schwachstellen führen. Eine Lösung besteht darin, serverseitige Anfragen zu implementieren, bei denen API-Aufrufe von einem Backend-Server erfolgen, was ein zusätzliches Maß an Sicherheit bietet. Dies verhindert, dass böswillige Akteure Frontend-Anfragen stören oder direkt über den Browser an sensible Daten gelangen. Die Sicherung dieser API-Verbindungen ist von entscheidender Bedeutung, insbesondere beim Umgang mit Finanzinformationen wie Bitcoin-Kursen.