Oprava chyb funkcí JavaScriptu při načítání směnných kurzů

Jak vyřešit chyby ve funkcích načítání rychlosti JavaScriptu

JavaScript je efektivní nástroj pro vývoj webu, zejména při práci s externími API. Nicméně i zkušení vývojáři dělají typické chyby při psaní funkcí pro načítání dat z API. K jednomu takovému problému dochází, když se pokoušíte odeslat argumenty do funkce a jako odpověď získat nedefinované hodnoty.

Tento článek pojednává o potížích s psaním funkce JavaScript, která načítá kurzy bitcoinů mezi dvěma měnami. Problém „ReferenceError: btc není definován“ je často způsoben nesprávně zadanými parametry a proměnnými. Těmto obavám se lze vyhnout, pokud je kód správně strukturován.

Ukážeme vám, jak vytvořit funkci s názvem rošt (od, do), který přijímá dva parametry a vrací směnný kurz mezi dvěma měnami. Na konci této knihy budete vědět, jak správně předávat argumenty a spravovat chyby během procesů načítání dat.

Pokud se potýkáte s podobnými problémy nebo se vám zobrazila chyba „Nelze číst vlastnosti undefined (čtení 'sazba')“, tento článek vám pomůže s jejich odstraňováním a efektivním řešením. Podívejme se krok za krokem, jak tyto problémy vyřešit.

Pochopení toho, jak funkce JavaScriptu zpracovávají požadavky API na kurzy kryptoměn

Zde uvedené skripty demonstrují alternativní techniky pro získání směnných kurzů kryptoměn mezi dvěma měnami pomocí JavaScriptu. První skript využívá objekt XMLHttpRequest, což je jedna ze starších technik pro zpracování asynchronních požadavků HTTP v JavaScriptu. Funkce rošt (od, do) přijímá dva parametry: měny k převodu. URL se generuje dynamicky na základě dodaných parametrů a požadavek je odeslán do koncového bodu API Bitpay. Po obdržení odpovědi jsou data analyzována pomocí JSON.parse() zobrazí směnný kurz v těle dokladu. Toto řešení si zachovává kompatibilitu se staršími prohlížeči, ale postrádá některé novější funkce, jako jsou sliby, které jsou popsány ve druhém příkladu.

Ve druhém příkladu je k provedení stejné akce místo XMLHttpRequest použito rozhraní Fetch API. Fetch API je aktuálnější a nabízí jednodušší způsob zadávání síťových požadavků. Využívá sliby, že asynchronní tok bude čitelnější a lépe ovladatelný. Když je funkce vyvolána, odešle HTTP požadavek na stejnou URL a čeká na odpověď. Po získání odpovědi převede data na objekt JSON a získá rychlost. Rozhraní Fetch API zlepšuje správu chyb pomocí bloků try/catch ke shromažďování a správě jakýchkoli problémů, které nastanou během zpracování požadavku nebo dat.

Třetí skript se zaměřuje na a backendové prostředí a provádí dotazy API pomocí modulu HTTP Node.js. To je zvláště výhodné pro vývoj aplikací na straně serveru, které potřebují načíst směnné kurzy. Modul HTTP je zabudován do Node.js a umožňuje vývojářům provádět operace HTTP. Tato funkce vytvoří adresu URL stejným způsobem jako předchozí skripty, odešle volání GET do rozhraní API a poté analyzuje přijatá data. Výsledek je zaprotokolován do konzole, nikoli zobrazen v prohlížeči, takže se lépe hodí pro backendové scénáře, které nevyžadují webové prohlížeče.

Nakonec je zahrnuta testovací sada Jest, která kontroluje, zda řešení Fetch API funguje správně. Jest je populární testovací rámec as ním žert-fetch-zesměšňovat, můžeme v našich testech napodobit reakce API. To umožňuje vývojářům testovat svůj kód bez skutečného generování síťových dotazů, což urychluje proces testování a izoluje potenciální chyby. Testy ověřují, že data o sazbě byla úspěšně získána a zobrazena v těle dokumentu, což potvrzuje, že funkce funguje tak, jak bylo zamýšleno v různých kontextech. Testování je důležitým prvkem vývoje, zejména při práci s externími API, protože pomáhá včas odhalit chyby a zlepšuje celkovou stabilitu 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');
});

Zkoumání asynchronních funkcí JavaScriptu pro požadavky API

Zpracování asynchronních požadavků je zásadní při práci s API v JavaScriptu. Rozhraní Fetch API a XMLHttpRequest jsou dva základní způsoby vytváření těchto požadavků. Účelem asynchronních funkcí je zabránit zamrznutí prohlížeče nebo serveru při čekání na odpověď, a tím zlepšit uživatelskou zkušenost a výkon. Pochopení asynchronního chování umožňuje vývojářům vytvářet citlivější aplikace, které mohou získávat data z rozhraní API v reálném čase, aniž by to ovlivnilo hlavní vlákno.

Zpracování asynchronních požadavků vyžaduje správu odpovědí a různých chyb, které mohou během procesu nastat. Jedním z běžných problémů při načítání dat z externích rozhraní API je například vracení nedefinované hodnoty, jak ukazuje chyba v prvním případě. Když se vývojářům nepodaří efektivně spravovat výjimky, jejich aplikace může selhat nebo produkovat nepřesné výsledky. Zásadní je efektivní zpracování chyb, jako jsou bloky pokusů/úlovků nebo kontrola stavu odezvy.

Kromě zpracování chyb je při interakci s externími rozhraními API důležitým faktorem zabezpečení. Vystavení citlivých dat nebo udělení přímého přístupu k rozhraním API bez ověření může mít za následek zranitelnosti. Jedním z řešení je implementace požadavků na straně serveru, ve kterých jsou volání API prováděna z backendového serveru, což poskytuje další stupeň zabezpečení. To zakazuje zlomyslným aktérům zasahovat do front-endových požadavků nebo přímo získávat citlivá data prostřednictvím prohlížeče. Zabezpečení těchto připojení API je zásadní, zejména při práci s finančními informacemi, jako jsou bitcoinové sazby.