„JavaScript“ funkcijos klaidų taisymas, kai gaunami valiutų kursai

Kaip pašalinti „JavaScript“ greičio gavimo funkcijų klaidas

„JavaScript“ yra veiksminga žiniatinklio kūrimo priemonė, ypač dirbant su išorinėmis API. Tačiau net ir patyrę kūrėjai daro tipiškas klaidas rašydami funkcijas, skirtas duomenims iš API gauti. Viena iš tokių problemų kyla bandant siųsti argumentus į funkciją ir gauti neapibrėžtas reikšmes.

Šiame straipsnyje aptariami sunkumai rašant „JavaScript“ funkciją, kuri nuskaito bitkoino kursus tarp dviejų valiutų. Problemą „ReferenceError: btc neapibrėžta“ dažnai sukelia neteisingai nurodyti parametrai ir kintamieji. Šių rūpesčių galima išvengti, jei kodas yra tinkamai struktūrizuotas.

Parodysime, kaip sukurti funkciją pavadinimu grotelės (nuo, iki), kuris priima du parametrus ir grąžina dviejų valiutų kursą. Šios knygos pabaigoje jūs žinosite, kaip tinkamai perduoti argumentus ir valdyti klaidas duomenų gavimo procesuose.

Jei susiduriate su panašiomis problemomis arba gavote klaidą „Neįmanoma nuskaityti neapibrėžtų savybių (skaitymo rodiklis“), šis straipsnis padės pašalinti triktis ir veiksmingai jas išspręsti. Pažvelkime žingsnis po žingsnio, kaip išspręsti šias problemas.

Supratimas, kaip „JavaScript“ funkcijos tvarko API užklausas dėl kriptovaliutų kursų

Čia pateikti scenarijai demonstruoja alternatyvius metodus, kaip gauti kriptovaliutų keitimo kursus tarp dviejų valiutų naudojant JavaScript. Pirmasis scenarijus naudoja XMLHttpRequest objektą, kuris yra vienas iš senesnių metodų, leidžiančių apdoroti asinchronines HTTP užklausas JavaScript. Funkcija grotelės (nuo, iki) priima du parametrus: valiutas konvertuoti. URL sugeneruojamas dinamiškai pagal pateiktus parametrus, o užklausa siunčiama į „Bitpay“ API galutinį tašką. Gavus atsakymą, duomenys išanalizuojami naudojant JSON.parse() dokumento tekste rodomas valiutos kursas. Šis sprendimas palaiko suderinamumą su senesnėmis naršyklėmis, tačiau jam trūksta kai kurių naujesnių galimybių, pavyzdžiui, pažadų, kurie aptariami antrajame pavyzdyje.

Antrame pavyzdyje tam pačiam veiksmui atlikti naudojama Fetch API, o ne XMLHttpRequest. „Fettch“ API yra naujesnė ir siūlo lengvesnį būdą pateikti tinklo užklausas. Jis naudoja pažadus, kad asinchroninis srautas būtų lengviau skaitomas ir valdomas. Kai funkcija iškviečiama, ji pateikia HTTP užklausą tam pačiam URL ir laukia atsakymo. Gavęs atsakymą, jis paverčia duomenis į JSON objektą ir gauna rodiklį. „Fettch“ API pagerina klaidų valdymą, naudodama „try/catch“ blokus, kad surinktų ir tvarkytų visas problemas, kylančias vykdant užklausą arba apdorojant duomenis.

Trečiasis scenarijus skirtas a backend aplinka ir teikia API užklausas su Node.js HTTP moduliu. Tai ypač naudinga kuriant serverio programas, kurioms reikia nuskaityti valiutų kursus. HTTP modulis yra integruotas į Node.js ir leidžia kūrėjams atlikti HTTP operacijas. Ši funkcija sukuria URL taip pat, kaip ir ankstesni scenarijai, siunčia GET iškvietimą į API ir analizuoja gautus duomenis. Rezultatas registruojamas konsolėje, o ne rodomas naršyklėje, todėl jis geriau tinka vidiniams scenarijams, kuriems nereikia žiniatinklio naršyklių.

Galiausiai įtrauktas „Jest“ bandymų rinkinys, skirtas patikrinti, ar „Fetch API“ sprendimas tinkamai veikia. Jest yra populiari testavimo sistema ir su pajuokauti-pajuokauti, savo testuose galime imituoti API atsakymus. Tai leidžia kūrėjams išbandyti savo kodą negeneruojant tinklo užklausų, o tai pagreitina testavimo procesą ir išskiria galimas klaidas. Bandymais patikrinama, ar tarifų duomenys sėkmingai gauti ir rodomi dokumento korpuse, patvirtinant, kad funkcija įvairiuose kontekstuose veikia taip, kaip numatyta. Testavimas yra svarbus kūrimo elementas, ypač dirbant su išorinėmis API, nes padeda anksti aptikti klaidas ir pagerina bendrą produkto stabilumą.

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

Asinchroninių JavaScript funkcijų, skirtų API užklausoms, tyrinėjimas

Asinchroninių užklausų tvarkymas yra labai svarbus dirbant su „JavaScript“ API. „Fettch API“ ir „XMLHttpRequest“ yra du pagrindiniai šių užklausų pateikimo būdai. Asinchroninių funkcijų paskirtis – neleisti naršyklei ar serveriui užšalti laukiant atsakymo, taip pagerinant vartotojo patirtį ir našumą. Suprasdami asinchroninį elgesį, kūrėjai gali kurti labiau reaguojančias programas, kurios gali nuskaityti duomenis iš API realiuoju laiku nepaveikdamos pagrindinės gijos.

Tvarkant asinchronines užklausas reikia valdyti atsakymus ir įvairias klaidas, kurios gali atsirasti proceso metu. Pavyzdžiui, vienas dažnas sunkumas nuskaitant duomenis iš išorinių API yra neapibrėžtos vertės grąžinimas, kaip rodo klaida pradiniu atveju. Kai kūrėjai nesugeba efektyviai valdyti išimčių, jų programa gali sugesti arba pateikti netikslius rezultatus. Veiksmingas klaidų tvarkymas, pvz., „try/catch“ blokai arba atsako būsenos tikrinimas, yra labai svarbus.

Be klaidų valdymo, saugumas yra svarbus aspektas sąveikaujant su išorinėmis API. Atskleidus neskelbtinus duomenis arba suteikus tiesioginę prieigą prie API be patvirtinimo, gali atsirasti pažeidžiamumų. Vienas iš sprendimų yra įdiegti serverio užklausas, kai API iškvietimai atliekami iš užpakalinio serverio, užtikrinant papildomą saugumo lygį. Tai draudžia piktybiniams veikėjams kištis į sąsajos užklausas arba tiesiogiai gauti neskelbtinų duomenų per naršyklę. Šių API jungčių apsauga yra labai svarbi, ypač kai kalbama apie finansinę informaciją, pvz., bitkoinų tarifus.