Åtgärda JavaScript-funktionsfel vid hämtning av växelkurser

Hur man löser fel i JavaScript-hastighetshämtningsfunktioner

JavaScript är ett effektivt verktyg för webbutveckling, särskilt när man arbetar med externa API:er. Men även erfarna utvecklare gör typiska misstag när de skriver funktioner för att hämta data från API:er. Ett sådant problem uppstår när man försöker skicka argument till en funktion och få odefinierade värden som svar.

Den här artikeln diskuterar en svårighet med att skriva en JavaScript-funktion som hämtar bitcoinkurser mellan två valutor. Problemet "ReferenceError: btc är inte definierat" orsakas ofta av felaktigt angivna parametrar och variabler. Dessa problem kan undvikas om koden är korrekt strukturerad.

Vi visar dig hur du skapar en funktion med namnet riv (från, till), som accepterar två parametrar och returnerar växelkursen mellan de två valutorna. I slutet av den här boken kommer du att veta hur du korrekt skickar argument och hanterar fel under datahämtningsprocesser.

Om du upplever liknande problem eller har fått felet "Kan inte läsa egenskaperna för odefinierade (läser "hastighet")" hjälper den här artikeln dig att felsöka och lösa dem effektivt. Låt oss ta en steg-för-steg titt på hur man åtgärdar dessa problem.

Förstå hur JavaScript-funktioner hanterar API-förfrågningar för kryptovalutakurser

Skripten som tillhandahålls här visar alternativa tekniker för att få kryptovaluta växelkurser mellan två valutor med hjälp av JavaScript. Det första skriptet använder XMLHttpRequest-objektet, som är en av de äldre teknikerna för att hantera asynkrona HTTP-förfrågningar i JavaScript. Funktionen riv (från, till) accepterar två parametrar: valutorna som ska konverteras. En URL genereras dynamiskt baserat på de angivna parametrarna, och en begäran skickas till Bitpays API-slutpunkt. Efter att ha fått svaret analyseras data med JSON.parse() visar växelkursen i dokumentets brödtext. Denna lösning bibehåller kompatibilitet med äldre webbläsare, men den saknar några nyare funktioner som löften, som diskuteras i det andra exemplet.

I det andra exemplet används Fetch API istället för XMLHttpRequest för att göra samma åtgärd. Fetch API är mer aktuellt och erbjuder ett enklare sätt att göra nätverksförfrågningar. Det utnyttjar löften för att göra det asynkrona flödet mer läsbart och hanterbart. När funktionen anropas gör den en HTTP-förfrågan till samma URL och väntar på ett svar. Efter att ha fått svaret omvandlar den data till ett JSON-objekt och erhåller hastigheten. Fetch API förbättrar felhanteringen genom att använda försök/fånga-block för att samla in och hantera eventuella problem som uppstår under begäran eller databehandling.

Det tredje manuset är inriktat på a backend-miljö och gör API-frågor med Node.js HTTP-modul. Detta är särskilt fördelaktigt för att utveckla appar på serversidan som behöver hämta växelkurser. HTTP-modulen är inbyggd i Node.js och låter utvecklare utföra HTTP-operationer. Den här funktionen skapar URL:en på samma sätt som de tidigare skripten, skickar ett GET-anrop till API:t och analyserar sedan mottagna data. Resultatet loggas i konsolen istället för att visas i webbläsaren, vilket gör det bättre lämpat för backend-scenarier som inte kräver webbläsare.

Slutligen ingår en Jest-testsvit för att kontrollera att Fetch API-lösningen fungerar korrekt. Jest är ett populärt testramverk, och med skämt-hätta-håna, kan vi imitera API-svar i våra tester. Detta gör det möjligt för utvecklare att testa sin kod utan att faktiskt generera nätverksfrågor, vilket påskyndar testprocessen och isolerar potentiella buggar. Testerna verifierar att hastighetsdata framgångsrikt erhållits och visas i dokumentets kropp, vilket bekräftar att funktionen fungerar som avsett i olika sammanhang. Testning är en viktig del av utvecklingen, särskilt när man arbetar med externa API:er, eftersom det hjälper till att upptäcka misstag tidigt och förbättrar produktens övergripande stabilitet.

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

Utforska asynkrona JavaScript-funktioner för API-förfrågningar

Att hantera asynkrona förfrågningar är avgörande när man arbetar med API:er i JavaScript. Fetch API och XMLHttpRequest är de två grundläggande sätten att göra dessa förfrågningar. Syftet med asynkrona funktioner är att förhindra att webbläsaren eller servern fryser medan den väntar på ett svar, vilket förbättrar användarupplevelsen och prestanda. Att förstå asynkront beteende gör det möjligt för utvecklare att bygga mer responsiva applikationer som kan hämta data från API:er i realtid utan att påverka huvudtråden.

Att hantera asynkrona förfrågningar kräver hantering av svar och olika misstag som kan uppstå under processen. Till exempel är en vanlig svårighet när man hämtar data från externa API:er att returnera ett odefinierat värde, vilket visas av felet i det initiala fallet. När utvecklare misslyckas med att hantera undantag effektivt kan deras applikation krascha eller ge felaktiga resultat. Effektiv felhantering, såsom försök/fånga block eller svarsstatuskontroller, är avgörande.

Förutom felhantering är säkerhet en viktig faktor vid interaktion med externa API:er. Att exponera känslig data eller ge direkt åtkomst till API:er utan validering kan resultera i sårbarheter. En lösning är att implementera förfrågningar på serversidan, där API-anrop görs från en backend-server, vilket ger en extra grad av säkerhet. Detta förbjuder illvilliga aktörer från att störa front-end-förfrågningar eller direkt skaffa känslig data via webbläsaren. Att säkra dessa API-anslutningar är avgörande, särskilt när man hanterar finansiell information som bitcoin-kurser.