Correcció d'errors de la funció JavaScript en obtenir els tipus de canvi

Com resoldre errors a les funcions d'obtenció de la taxa de JavaScript

JavaScript és una eina eficaç per al desenvolupament web, especialment quan es treballa amb API externes. Tanmateix, fins i tot els desenvolupadors experimentats cometen errors típics quan escriuen funcions per recuperar dades de les API. Un d'aquests problemes passa quan s'intenta enviar arguments a una funció i obtenir valors no definits com a resposta.

En aquest article es parla d'una dificultat per escriure una funció JavaScript que recuperi les taxes de bitcoin entre dues monedes. El problema, "ReferenceError: btc is not defined", sovint és causat per paràmetres i variables incorrectament especificats. Aquestes preocupacions es poden evitar si el codi està estructurat correctament.

Us mostrarem com crear una funció anomenada reixa (des de, fins a), que accepta dos paràmetres i retorna el tipus de canvi entre les dues monedes. Al final d'aquest llibre, sabreu com passar correctament els arguments i gestionar els errors durant els processos d'obtenció de dades.

Si teniu problemes similars o heu rebut l'error "No es poden llegir les propietats de undefined (llegint 'taxa')", aquest article us ajudarà a resoldre'ls i resoldre'ls de manera eficaç. Fem una ullada pas a pas a com solucionar aquests problemes.

Comprendre com les funcions de JavaScript gestionen les sol·licituds d'API per a les taxes de criptomoneda

Els scripts que s'ofereixen aquí mostren tècniques alternatives per obtenir tipus de canvi de criptomoneda entre dues monedes mitjançant JavaScript. El primer script fa ús de l'objecte XMLHttpRequest, que és una de les tècniques més antigues per gestionar sol·licituds HTTP asíncrones en JavaScript. La funció reixa (des de, fins a) accepta dos paràmetres: les monedes a convertir. Es genera un URL de manera dinàmica en funció dels paràmetres proporcionats i s'envia una sol·licitud al punt final de l'API de Bitpay. Després d'obtenir la resposta, les dades s'analitzen mitjançant JSON.parse() mostra el tipus de canvi al cos del document. Aquesta solució manté la compatibilitat amb navegadors més antics, però no té algunes capacitats més noves, com ara les promeses, que es comenten al segon exemple.

En el segon exemple, s'utilitza l'API Fetch en lloc de XMLHttpRequest per fer la mateixa acció. L'API Fetch és més actual i ofereix una manera més fàcil de fer sol·licituds de xarxa. Aprofita les promeses per fer que el flux asíncron sigui més llegible i manejable. Quan s'invoca la funció, fa una sol·licitud HTTP al mateix URL i espera una resposta. Després d'obtenir la resposta, converteix les dades en un objecte JSON i n'obté la taxa. L'API Fetch millora la gestió d'errors mitjançant l'ús de blocs try/catch per recopilar i gestionar qualsevol problema que sorgeixi durant la sol·licitud o el processament de dades.

El tercer script té com a objectiu a entorn de backend i fa consultes a l'API amb el mòdul HTTP de Node.js. Això és especialment beneficiós per desenvolupar aplicacions del costat del servidor que necessiten recuperar tipus de canvi. El mòdul HTTP està integrat a Node.js i permet als desenvolupadors dur a terme operacions HTTP. Aquesta funció crea l'URL de la mateixa manera que els scripts anteriors, envia una trucada GET a l'API i després analitza les dades rebudes. El resultat es registra a la consola en lloc de mostrar-se al navegador, per la qual cosa és més adequat per a escenaris de fons que no requereixen navegadors web.

Finalment, s'inclou un conjunt de proves Jest per comprovar que la solució Fetch API funciona correctament. Jest és un marc de proves popular, i amb broma-buscar-burla, podem imitar les respostes de l'API a les nostres proves. Això permet als desenvolupadors provar el seu codi sense generar consultes de xarxa, la qual cosa accelera el procés de prova i aïlla possibles errors. Les proves verifiquen que les dades de la taxa s'obtenen correctament i es mostren al cos del document, confirmant que la funció funciona com es pretén en diversos contextos. Les proves són un element important del desenvolupament, sobretot quan es treballa amb API externes, perquè ajuda a detectar errors des del principi i millora l'estabilitat general del producte.

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

Exploració de les funcions de JavaScript asíncrones per a sol·licituds d'API

La gestió de les sol·licituds asíncrones és crucial quan es treballa amb API en JavaScript. L'API Fetch i XMLHttpRequest són les dues maneres bàsiques de fer aquestes sol·licituds. L'objectiu de les funcions asíncrones és evitar que el navegador o el servidor es congelin mentre s'espera una resposta, millorant així l'experiència i el rendiment de l'usuari. Entendre el comportament asíncron permet als desenvolupadors crear aplicacions més sensibles que poden recuperar dades de les API en temps real sense afectar el fil principal.

La gestió de sol·licituds asíncrones requereix gestionar les respostes i els diversos errors que poden sorgir durant el procés. Per exemple, una dificultat habitual a l'hora de recuperar dades d'API externes és retornar un valor no definit, tal com demostra l'error en el cas inicial. Quan els desenvolupadors no gestionen les excepcions de manera eficaç, la seva aplicació pot fallar o produir resultats inexactes. La gestió eficaç dels errors, com ara els blocs try/catch o les comprovacions de l'estat de resposta, és crucial.

A més de la gestió d'errors, la seguretat és una consideració important a l'hora d'interactuar amb API externes. Exposar dades sensibles o concedir accés directe a les API sense validació pot provocar vulnerabilitats. Una solució és implementar sol·licituds del costat del servidor, en què les trucades a l'API es fan des d'un servidor de fons, proporcionant un grau addicional de seguretat. Això prohibeix que els actors maliciosos interfereixin amb les sol·licituds de front-end o obtinguin directament dades sensibles mitjançant el navegador. Assegurar aquestes connexions API és fonamental, especialment quan es tracta d'informació financera com les tarifes de bitcoin.