Odpravljanje napak funkcij JavaScript pri pridobivanju menjalnih tečajev

Kako odpraviti napake v funkcijah pridobivanja stopnje JavaScript

JavaScript je učinkovito orodje za spletni razvoj, zlasti pri delu z zunanjimi API-ji. Vendar celo izkušeni razvijalci delajo tipične napake pri pisanju funkcij za pridobivanje podatkov iz API-jev. Ena taka težava se zgodi, ko poskušate poslati argumente v funkcijo in v odgovor dobite nedefinirane vrednosti.

Ta članek obravnava težavo pri pisanju funkcije JavaScript, ki pridobi tečaje bitcoinov med dvema valutama. Težavo »ReferenceError: btc ni definiran« pogosto povzročijo nepravilno določeni parametri in spremenljivke. Tem pomislekom se je mogoče izogniti, če je koda pravilno strukturirana.

Pokazali vam bomo, kako ustvarite funkcijo z imenom rešetka (od, do), ki sprejme dva parametra in vrne menjalni tečaj med obema valutama. Do konca te knjige boste vedeli, kako pravilno posredovati argumente in upravljati napake med procesi pridobivanja podatkov.

Če imate podobne težave ali ste prejeli napako »Ne morem prebrati lastnosti nedefiniranega (branje 'hitrost'),« vam bo ta članek pomagal odpraviti težave in jih učinkovito rešiti. Oglejmo si korak za korakom, kako odpraviti te težave.

Razumevanje, kako funkcije JavaScript obravnavajo zahteve API za tečaje kriptovalut

Tukaj priloženi skripti prikazujejo alternativne tehnike za pridobivanje menjalnih tečajev kriptovalut med dvema valutama z uporabo JavaScripta. Prvi skript uporablja objekt XMLHttpRequest, ki je ena od starejših tehnik za obravnavanje asinhronih zahtev HTTP v JavaScriptu. Funkcija rešetka (od, do) sprejme dva parametra: valute za pretvorbo. URL se generira dinamično na podlagi posredovanih parametrov, zahteva pa se pošlje končni točki API-ja Bitpay. Po prejemu odgovora se podatki razčlenijo z uporabo JSON.parse() prikaže menjalni tečaj v telesu dokumenta. Ta rešitev ohranja združljivost s starejšimi brskalniki, vendar nima nekaterih novejših zmožnosti, kot so obljube, ki so obravnavane v drugem primeru.

V drugem primeru je za izvedbo istega dejanja namesto XMLHttpRequest uporabljen API Fetch. Fetch API je novejši in ponuja lažji način za omrežne zahteve. Izkorišča obljube, da bo asinhroni tok bolj berljiv in obvladljiv. Ko je funkcija priklicana, pošlje zahtevo HTTP na isti URL in čaka na odgovor. Po prejemu odgovora pretvori podatke v objekt JSON in pridobi stopnjo. API Fetch izboljša upravljanje napak z uporabo blokov poskusi/ulovi za zbiranje in upravljanje morebitnih težav, ki se pojavijo med obdelavo zahteve ali podatkov.

Tretji scenarij je namenjen a zaledno okolje in izvaja poizvedbe API z modulom HTTP Node.js. To je še posebej koristno za razvoj strežniških aplikacij, ki potrebujejo pridobivanje menjalnih tečajev. Modul HTTP je vgrajen v Node.js in razvijalcem omogoča izvajanje operacij HTTP. Ta funkcija ustvari URL na enak način kot prejšnji skripti, pošlje klic GET API-ju in nato razčleni prejete podatke. Rezultat se zabeleži v konzolo in ne prikaže v brskalniku, zaradi česar je bolj primeren za zaledne scenarije, ki ne potrebujejo spletnih brskalnikov.

Nazadnje je vključen testni paket Jest za preverjanje, ali rešitev Fetch API deluje pravilno. Jest je priljubljeno ogrodje za testiranje in s šala-fetch-posmeh, lahko v naših testih posnemamo odzive API-ja. To omogoča razvijalcem, da preizkusijo svojo kodo, ne da bi dejansko ustvarili omrežne poizvedbe, kar pospeši postopek testiranja in izolira morebitne napake. Preizkusi preverjajo, ali so podatki o stopnji uspešno pridobljeni in prikazani v telesu dokumenta, kar potrjuje, da funkcija v različnih kontekstih deluje, kot je predvideno. Testiranje je pomemben element razvoja, zlasti pri delu z zunanjimi API-ji, saj pomaga odkriti napake zgodaj in izboljša splošno stabilnost izdelka.

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

Raziskovanje asinhronih funkcij JavaScript za zahteve API

Ravnanje z asinhronimi zahtevami je ključnega pomena pri delu z API-ji v JavaScriptu. Fetch API in XMLHttpRequest sta dva osnovna načina za izdelavo teh zahtev. Namen asinhronih funkcij je preprečiti zamrznitev brskalnika ali strežnika med čakanjem na odgovor, s čimer se izboljša uporabniška izkušnja in zmogljivost. Razumevanje asinhronega vedenja razvijalcem omogoča izdelavo bolj odzivnih aplikacij, ki lahko v realnem času pridobijo podatke iz API-jev, ne da bi to vplivalo na glavno nit.

Ravnanje z asinhronimi zahtevami zahteva upravljanje odzivov in različnih napak, ki se lahko pojavijo med postopkom. Na primer, ena pogosta težava pri pridobivanju podatkov iz zunanjih API-jev je vračanje nedefinirane vrednosti, kot je razvidno iz napake v začetnem primeru. Če razvijalci ne uspejo učinkovito upravljati izjem, se lahko njihova aplikacija zruši ali povzroči netočne rezultate. Učinkovito obravnavanje napak, kot so poskusni/ulovni bloki ali preverjanja statusa odziva, je ključnega pomena.

Poleg obravnavanja napak je pri interakciji z zunanjimi API-ji pomemben dejavnik varnost. Izpostavitev občutljivih podatkov ali odobritev neposrednega dostopa do API-jev brez preverjanja lahko povzroči ranljivosti. Ena rešitev je implementacija zahtev na strani strežnika, pri katerih se klici API izvajajo iz zalednega strežnika, kar zagotavlja dodatno stopnjo varnosti. To zlonamernim akterjem prepoveduje vmešavanje v sprednje zahteve ali neposredno pridobivanje občutljivih podatkov prek brskalnika. Zaščita teh povezav API je ključnega pomena, zlasti pri obravnavanju finančnih informacij, kot so tečaji bitcoinov.