Remedierea erorilor funcției JavaScript la preluarea cursurilor de schimb

Cum se rezolvă erorile în funcțiile de preluare a ratei JavaScript

JavaScript este un instrument eficient pentru dezvoltarea web, în ​​special atunci când lucrați cu API-uri externe. Cu toate acestea, chiar și dezvoltatorii experimentați fac greșeli tipice atunci când scriu funcții pentru a prelua date din API-uri. O astfel de problemă se întâmplă atunci când încercați să trimiteți argumente într-o funcție și să obțineți valori nedefinite ca răspuns.

Acest articol discută o dificultate în scrierea unei funcții JavaScript care preia ratele bitcoin între două valute. Problema, „ReferenceError: btc is not defined”, este adesea cauzată de parametri și variabile specificate incorect. Aceste preocupări pot fi evitate dacă codul este structurat corect.

Vă vom arăta cum să creați o funcție numită grătar (de la, la), care acceptă doi parametri și returnează cursul de schimb dintre cele două valute. Până la sfârșitul acestei cărți, veți ști cum să transmiteți corect argumentele și să gestionați erorile în timpul proceselor de preluare a datelor.

Dacă întâmpinați probleme similare sau ați primit eroarea „Nu pot citi proprietățile nedefinite (citirea „rata”)”, acest articol vă va ajuta să le depanați și să le rezolvați eficient. Să aruncăm o privire pas cu pas la cum să remediați aceste probleme.

Înțelegerea modului în care funcțiile JavaScript gestionează solicitările API pentru ratele de criptomonedă

Scripturile furnizate aici demonstrează tehnici alternative pentru a obține rate de schimb criptomonede între două valute folosind JavaScript. Primul script folosește obiectul XMLHttpRequest, care este una dintre tehnicile mai vechi de a gestiona solicitările HTTP asincrone în JavaScript. Funcția grătar (de la, la) acceptă doi parametri: monedele de convertit. O adresă URL este generată dinamic pe baza parametrilor furnizați și o solicitare este trimisă la punctul final API al Bitpay. După obținerea răspunsului, datele sunt analizate folosind JSON.parse() afișează cursul de schimb în corpul documentului. Această soluție menține compatibilitatea cu browserele mai vechi, dar îi lipsesc unele capabilități mai noi, cum ar fi promisiunile, care sunt discutate în al doilea exemplu.

În al doilea exemplu, API-ul Fetch este utilizat în loc de XMLHttpRequest pentru a face aceeași acțiune. API-ul Fetch este mai actual și oferă o modalitate mai ușoară de a face solicitări de rețea. Ea valorifică promisiunile pentru a face fluxul asincron mai lizibil și mai ușor de gestionat. Când funcția este invocată, face o solicitare HTTP către aceeași adresă URL și așteaptă un răspuns. După obținerea răspunsului, transformă datele într-un obiect JSON și obține rata. API-ul Fetch îmbunătățește gestionarea erorilor prin utilizarea blocurilor try/catch pentru a colecta și gestiona orice probleme care apar în timpul solicitării sau procesării datelor.

Al treilea script vizează a mediu backend și face interogări API cu modulul HTTP al lui Node.js. Acest lucru este benefic în special pentru dezvoltarea de aplicații pe partea de server care necesită preluarea ratelor de schimb. Modulul HTTP este încorporat în Node.js și permite dezvoltatorilor să efectueze operațiuni HTTP. Această funcție creează adresa URL în același mod ca și scripturile anterioare, trimite un apel GET către API și apoi analizează datele primite. Rezultatul este înregistrat în consolă, mai degrabă decât afișat în browser, ceea ce îl face mai potrivit pentru scenariile backend care nu necesită browsere web.

În cele din urmă, este inclusă o suită de teste Jest pentru a verifica dacă soluția Fetch API funcționează corect. Jest este un cadru de testare popular și cu gluma-aducerea-batjoc, putem imita răspunsurile API în testele noastre. Acest lucru le permite dezvoltatorilor să-și testeze codul fără a genera interogări de rețea, ceea ce accelerează procesul de testare și izolează erorile potențiale. Testele verifică dacă datele ratelor sunt obținute cu succes și afișate în corpul documentului, confirmând că funcția funcționează conform intenției în diverse contexte. Testarea este un element important de dezvoltare, mai ales atunci când lucrați cu API-uri externe, deoarece ajută la detectarea greșelilor de la început și îmbunătățește stabilitatea generală a produsului.

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

Explorarea funcțiilor JavaScript asincrone pentru solicitările API

Gestionarea cererilor asincrone este crucială atunci când lucrați cu API-uri în JavaScript. API-ul Fetch și XMLHttpRequest sunt cele două modalități de bază de a face aceste solicitări. Scopul funcțiilor asincrone este de a preveni blocarea browserului sau serverului în așteptarea unui răspuns, îmbunătățind astfel experiența și performanța utilizatorului. Înțelegerea comportamentului asincron permite dezvoltatorilor să creeze aplicații mai receptive care pot prelua date din API-uri în timp real, fără a afecta firul principal.

Gestionarea cererilor asincrone necesită gestionarea răspunsurilor și a diverselor greșeli care pot apărea în timpul procesului. De exemplu, o dificultate comună la preluarea datelor de la API-uri externe este returnarea unei valori nedefinite, așa cum demonstrează eroarea din cazul inițial. Când dezvoltatorii nu reușesc să gestioneze excepțiile în mod eficient, aplicația lor se poate bloca sau produce rezultate inexacte. Gestionarea eficientă a erorilor, cum ar fi blocurile try/catch sau verificările stării răspunsului, este crucială.

Pe lângă gestionarea erorilor, securitatea este un aspect important atunci când interacționați cu API-uri externe. Expunerea datelor sensibile sau acordarea accesului direct la API-uri fără validare poate duce la vulnerabilități. O soluție este implementarea cererilor pe partea de server, în care apelurile API sunt efectuate de pe un server backend, oferind un grad suplimentar de securitate. Acest lucru interzice actorilor rău intenționați să interfereze cu solicitările front-end sau să obțină direct date sensibile prin intermediul browserului. Securizarea acestor conexiuni API este esențială, mai ales atunci când aveți de-a face cu informații financiare precum ratele bitcoin.