Oprava chýb funkcie JavaScript pri načítavaní výmenných kurzov

Ako vyriešiť chyby vo funkciách načítania rýchlosti JavaScriptu

JavaScript je efektívny nástroj pre vývoj webu, najmä pri práci s externými API. Avšak aj skúsení vývojári robia typické chyby pri písaní funkcií na získanie údajov z API. Jeden takýto problém nastane, keď sa pokúšate odoslať argumenty do funkcie a ako odpoveď získať nedefinované hodnoty.

Tento článok pojednáva o problémoch s písaním funkcie JavaScript, ktorá načítava kurzy bitcoinov medzi dvoma menami. Problém „ReferenceError: btc nie je definovaný“ je často spôsobený nesprávne špecifikovanými parametrami a premennými. Týmto obavám sa možno vyhnúť, ak je kód správne štruktúrovaný.

Ukážeme vám, ako vytvoriť funkciu s názvom rošt (od, do), ktorý akceptuje dva parametre a vráti výmenný kurz medzi týmito dvoma menami. Na konci tejto knihy budete vedieť, ako správne odovzdávať argumenty a spravovať chyby počas procesov načítania údajov.

Ak sa stretávate s podobnými problémami alebo sa vám zobrazila chyba „Nedá sa prečítať vlastnosti nedefinované (číta sa ‚sadzba‘)“, tento článok vám pomôže pri ich riešení a efektívnom riešení. Pozrime sa krok za krokom na to, ako tieto problémy vyriešiť.

Pochopenie toho, ako funkcie JavaScriptu spracovávajú požiadavky API na sadzby kryptomien

Skripty dodané tu demonštrujú alternatívne techniky na získanie výmenných kurzov kryptomien medzi dvoma menami pomocou JavaScriptu. Prvý skript využíva objekt XMLHttpRequest, čo je jedna zo starších techník na spracovanie asynchrónnych požiadaviek HTTP v JavaScripte. Funkcia rošt (od, do) akceptuje dva parametre: meny na prevod. URL sa generuje dynamicky na základe dodaných parametrov a požiadavka sa odošle do koncového bodu API Bitpay. Po získaní odpovede sa údaje analyzujú pomocou JSON.parse() zobrazí výmenný kurz v tele dokladu. Toto riešenie si zachováva kompatibilitu so staršími prehliadačmi, ale chýbajú mu niektoré novšie funkcie, ako sú sľuby, o ktorých sa hovorí v druhom príklade.

V druhom príklade sa na vykonanie rovnakej akcie používa rozhranie Fetch API namiesto XMLHttpRequest. Rozhranie Fetch API je aktuálnejšie a ponúka jednoduchší spôsob vytvárania sieťových požiadaviek. Využíva sľuby, že asynchrónny tok bude čitateľnejší a spravovateľnejší. Keď je funkcia vyvolaná, vytvorí požiadavku HTTP na rovnakú adresu URL a čaká na odpoveď. Po získaní odpovede zmení údaje na objekt JSON a získa rýchlosť. Rozhranie Fetch API zlepšuje správu chýb pomocou blokov try/catch na zhromažďovanie a správu akýchkoľvek problémov, ktoré sa vyskytnú počas spracovania požiadavky alebo údajov.

Tretí skript sa zameriava na a backendové prostredie a vytvára API dotazy s modulom HTTP Node.js. To je obzvlášť výhodné pre vývoj aplikácií na strane servera, ktoré potrebujú získať výmenné kurzy. Modul HTTP je zabudovaný do Node.js a umožňuje vývojárom vykonávať operácie HTTP. Táto funkcia vytvorí adresu URL rovnakým spôsobom ako predchádzajúce skripty, odošle volanie GET do rozhrania API a potom analyzuje prijaté údaje. Výsledok je zaznamenaný v konzole a nie zobrazený v prehliadači, takže je vhodnejší pre backendové scenáre, ktoré nevyžadujú webové prehliadače.

Nakoniec je zahrnutá testovacia sada Jest na kontrolu správneho fungovania riešenia Fetch API. Jest je populárny testovací rámec as ním žartovať, môžeme v našich testoch napodobniť reakcie API. To umožňuje vývojárom testovať svoj kód bez skutočného generovania sieťových dotazov, čo urýchľuje proces testovania a izoluje potenciálne chyby. Testy overia, či sa údaje o sadzbe úspešne získajú a zobrazia v tele dokumentu, čím sa potvrdí, že funkcia funguje tak, ako bola zamýšľaná v rôznych kontextoch. Testovanie je dôležitým prvkom vývoja, najmä pri práci s externými API, pretože pomáha včas odhaliť chyby a zlepšuje celkovú 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');
});

Skúmanie asynchrónnych funkcií JavaScriptu pre požiadavky API

Spracovanie asynchrónnych požiadaviek je kľúčové pri práci s API v JavaScripte. Fetch API a XMLHttpRequest sú dva základné spôsoby vytvárania týchto požiadaviek. Účelom asynchrónnych funkcií je zabrániť zamrznutiu prehliadača alebo servera počas čakania na odpoveď, čím sa zlepšuje používateľská skúsenosť a výkon. Pochopenie asynchrónneho správania umožňuje vývojárom vytvárať citlivejšie aplikácie, ktoré dokážu získavať údaje z API v reálnom čase bez ovplyvnenia hlavného vlákna.

Spracovanie asynchrónnych požiadaviek vyžaduje riadenie odpovedí a rôznych chýb, ktoré môžu počas procesu nastať. Napríklad jedným z bežných problémov pri získavaní údajov z externých rozhraní API je vrátenie nedefinovanej hodnoty, čo dokazuje chyba v počiatočnom prípade. Keď vývojári nedokážu efektívne spravovať výnimky, ich aplikácia môže zlyhať alebo produkovať nepresné výsledky. Efektívne spracovanie chýb, ako sú napríklad bloky pokusov/zachytení alebo kontrola stavu odozvy, je kľúčové.

Okrem spracovania chýb je pri interakcii s externými API dôležitým faktorom aj bezpečnosť. Odhalenie citlivých údajov alebo poskytnutie priameho prístupu k rozhraniam API bez overenia môže viesť k zraniteľnostiam. Jedným z riešení je implementácia požiadaviek na strane servera, pri ktorých sa volania API uskutočňujú z backendového servera, čo poskytuje ďalší stupeň bezpečnosti. To zakazuje zlomyseľným aktérom zasahovať do front-endových požiadaviek alebo priamo získavať citlivé údaje cez prehliadač. Zabezpečenie týchto spojení API je rozhodujúce, najmä pri práci s finančnými informáciami, ako sú bitcoinové sadzby.