Retting av JavaScript-funksjonsfeil ved henting av valutakurser

Slik løser du feil i JavaScript-hastighetshentingsfunksjoner

JavaScript er et effektivt verktøy for webutvikling, spesielt når du arbeider med eksterne API-er. Men selv erfarne utviklere gjør typiske feil når de skriver funksjoner for å hente data fra APIer. Et slikt problem oppstår når du prøver å sende argumenter inn i en funksjon og få udefinerte verdier som svar.

Denne artikkelen diskuterer problemer med å skrive en JavaScript-funksjon som henter bitcoin-kurser mellom to valutaer. Problemet "ReferenceError: btc er ikke definert," er ofte forårsaket av feil spesifiserte parametere og variabler. Disse bekymringene kan unngås hvis koden er riktig strukturert.

Vi viser deg hvordan du lager en funksjon med navn rist (fra, til), som aksepterer to parametere og returnerer valutakursen mellom de to valutaene. Ved slutten av denne boken vil du vite hvordan du sender argumenter på riktig måte og håndterer feil under datahentingsprosesser.

Hvis du opplever lignende problemer eller har mottatt feilen "Kan ikke lese egenskapene til udefinert (leser 'rate')," vil denne artikkelen hjelpe deg med å feilsøke og løse dem effektivt. La oss ta en trinnvis titt på hvordan du løser disse problemene.

Forstå hvordan JavaScript-funksjoner håndterer API-forespørsler om kryptovalutakurser

Skriptene som leveres her demonstrerer alternative teknikker for å få kryptovalutakurser mellom to valutaer ved å bruke JavaScript. Det første skriptet bruker XMLHttpRequest-objektet, som er en av de eldre teknikkene for å håndtere asynkrone HTTP-forespørsler i JavaScript. Funksjonen rist (fra, til) godtar to parametere: valutaene som skal konverteres. En URL genereres dynamisk basert på de oppgitte parameterne, og en forespørsel sendes til Bitpays API-endepunkt. Etter å ha fått svaret, analyseres dataene ved hjelp av JSON.parse() viser valutakursen i dokumentteksten. Denne løsningen opprettholder kompatibilitet med eldre nettlesere, men den mangler noen nyere funksjoner som løfter, som er omtalt i det andre eksemplet.

I det andre eksemplet brukes Fetch API i stedet for XMLHttpRequest for å gjøre den samme handlingen. Fetch API er mer oppdatert og tilbyr en enklere måte å sende nettverksforespørsler på. Den utnytter løfter for å gjøre den asynkrone flyten mer lesbar og håndterbar. Når funksjonen påkalles, sender den en HTTP-forespørsel til samme URL og venter på svar. Etter å ha fått svaret, snur den dataene til et JSON-objekt og får taksten. Fetch API forbedrer feilhåndteringen ved å bruke try/catch-blokker for å samle inn og administrere eventuelle problemer som oppstår under forespørselen eller databehandlingen.

Det tredje skriptet retter seg mot en backend-miljø og gjør API-spørringer med Node.js sin HTTP-modul. Dette er spesielt gunstig for å utvikle apper på serversiden som trenger å hente valutakurser. HTTP-modulen er innebygd i Node.js og lar utviklere utføre HTTP-operasjoner. Denne funksjonen oppretter URL-en på samme måte som de tidligere skriptene, sender et GET-kall til API-en og analyserer deretter dataene som mottas. Resultatet logges i konsollen i stedet for å vises i nettleseren, noe som gjør det bedre egnet for backend-scenarier som ikke krever nettlesere.

Til slutt er en Jest-testpakke inkludert for å sjekke at Fetch API-løsningen fungerer som den skal. Jest er et populært testrammeverk, og med spøk-hente-hån, kan vi imitere API-svar i testene våre. Dette gjør det mulig for utviklere å teste koden sin uten å generere nettverksspørringer, noe som øker hastigheten på testprosessen og isolerer potensielle feil. Testene bekrefter at satsdataene er innhentet og vist i dokumentets hoveddel, og bekrefter at funksjonen fungerer etter hensikten i ulike sammenhenger. Testing er et viktig element i utviklingen, spesielt når du arbeider med eksterne APIer, fordi det hjelper til med å oppdage feil tidlig og forbedrer den generelle stabiliteten til produktet.

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

Utforsking av asynkrone JavaScript-funksjoner for API-forespørsler

Håndtering av asynkrone forespørsler er avgjørende når du arbeider med APIer i JavaScript. Fetch API og XMLHttpRequest er de to grunnleggende måtene å gjøre disse forespørslene på. Formålet med asynkrone funksjoner er å forhindre at nettleseren eller serveren fryser mens den venter på svar, og dermed forbedre brukeropplevelsen og ytelsen. Å forstå asynkron atferd gjør det mulig for utviklere å bygge mer responsive applikasjoner som kan hente data fra APIer i sanntid uten å påvirke hovedtråden.

Håndtering av asynkrone forespørsler krever håndtering av svar og ulike feil som kan oppstå under prosessen. For eksempel er en vanlig vanskelighet når du henter data fra eksterne APIer, å returnere en udefinert verdi, som demonstrert av feilen i det første tilfellet. Når utviklere ikke klarer å administrere unntak effektivt, kan applikasjonen deres krasje eller gi unøyaktige resultater. Effektiv feilhåndtering, som prøv/fangst-blokker eller kontroll av responsstatus, er avgjørende.

I tillegg til feilhåndtering er sikkerhet en viktig faktor når du samhandler med eksterne APIer. Å avsløre sensitive data eller gi direkte tilgang til APIer uten validering kan føre til sårbarheter. En løsning er å implementere forespørsler på serversiden, der API-kall gjøres fra en backend-server, noe som gir en ekstra grad av sikkerhet. Dette forbyr ondsinnede aktører fra å forstyrre front-end-forespørsler eller direkte innhente sensitive data via nettleseren. Å sikre disse API-forbindelsene er kritisk, spesielt når du arbeider med finansiell informasjon som bitcoin-priser.