Correction des erreurs de fonction JavaScript lors de la récupération des taux de change

Comment résoudre les erreurs dans les fonctions de récupération de taux JavaScript

JavaScript est un outil efficace pour le développement Web, en particulier lorsque vous travaillez avec des API externes. Cependant, même les développeurs expérimentés commettent des erreurs typiques lors de l’écriture de fonctions permettant de récupérer des données à partir d’API. Un de ces problèmes se produit lorsque vous tentez d'envoyer des arguments dans une fonction et d'obtenir des valeurs non définies en réponse.

Cet article traite d'une difficulté liée à l'écriture d'une fonction JavaScript qui récupère les taux de bitcoin entre deux devises. Le problème « ReferenceError : btc n'est pas défini » est fréquemment dû à des paramètres et des variables mal spécifiés. Ces problèmes peuvent être évités si le code est correctement structuré.

Nous allons vous montrer comment créer une fonction nommée grille(de, à), qui accepte deux paramètres et renvoie le taux de change entre les deux devises. À la fin de ce livre, vous saurez comment transmettre correctement les arguments et gérer les erreurs lors des processus de récupération de données.

Si vous rencontrez des problèmes similaires ou si vous avez reçu le message d'erreur « Impossible de lire les propriétés non définies (lecture de « taux ») », cet article vous aidera à les dépanner et à les résoudre efficacement. Voyons étape par étape comment résoudre ces problèmes.

Comprendre comment les fonctions JavaScript gèrent les demandes d'API pour les taux de crypto-monnaie

Les scripts fournis ici démontrent des techniques alternatives pour obtenir les taux de change de crypto-monnaie entre deux devises à l'aide de JavaScript. Le premier script utilise l'objet XMLHttpRequest, qui est l'une des techniques les plus anciennes pour gérer les requêtes HTTP asynchrones en JavaScript. La fonction grille(de, à) accepte deux paramètres : les devises à convertir. Une URL est générée dynamiquement en fonction des paramètres fournis et une demande est envoyée au point de terminaison de l'API de Bitpay. Après avoir obtenu la réponse, les données sont analysées à l'aide de JSON.parse() affiche le taux de change dans le corps du document. Cette solution maintient la compatibilité avec les anciens navigateurs, mais il lui manque certaines fonctionnalités plus récentes telles que les promesses, abordées dans le deuxième exemple.

Dans le deuxième exemple, l'API Fetch est utilisée à la place de XMLHttpRequest pour effectuer la même action. L'API Fetch est plus récente et offre un moyen plus simple d'effectuer des requêtes réseau. Il exploite les promesses visant à rendre le flux asynchrone plus lisible et gérable. Lorsque la fonction est invoquée, elle envoie une requête HTTP à la même URL et attend une réponse. Après avoir obtenu la réponse, il transforme les données en objet JSON et obtient le taux. L'API Fetch améliore la gestion des erreurs en utilisant des blocs try/catch pour collecter et gérer tous les problèmes survenant lors de la requête ou du traitement des données.

Le troisième script cible un environnement back-end et effectue des requêtes API avec le module HTTP de Node.js. Ceci est particulièrement avantageux pour développer des applications côté serveur nécessitant de récupérer des taux de change. Le module HTTP est intégré à Node.js et permet aux développeurs d'effectuer des opérations HTTP. Cette fonction crée l'URL de la même manière que les scripts précédents, envoie un appel GET à l'API, puis analyse les données reçues. Le résultat est enregistré dans la console plutôt que affiché dans le navigateur, ce qui le rend mieux adapté aux scénarios back-end qui ne nécessitent pas de navigateurs Web.

Enfin, une suite de tests Jest est incluse pour vérifier que la solution Fetch API fonctionne correctement. Jest est un framework de test populaire, et avec plaisanter-aller chercher-se moquer, nous pouvons imiter les réponses de l'API dans nos tests. Cela permet aux développeurs de tester leur code sans générer de requêtes réseau, ce qui accélère le processus de test et isole les bogues potentiels. Les tests vérifient que les données de taux sont obtenues et affichées avec succès dans le corps du document, confirmant que la fonction fonctionne comme prévu dans divers contextes. Les tests sont un élément important du développement, en particulier lorsque vous travaillez avec des API externes, car ils permettent de détecter les erreurs à un stade précoce et d'améliorer la stabilité globale du produit.

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

Explorer les fonctions JavaScript asynchrones pour les requêtes API

La gestion des requêtes asynchrones est cruciale lorsque vous travaillez avec des API en JavaScript. L'API Fetch et XMLHttpRequest sont les deux méthodes de base pour effectuer ces requêtes. Le but des fonctions asynchrones est d'empêcher le navigateur ou le serveur de se bloquer en attendant une réponse, améliorant ainsi l'expérience utilisateur et les performances. Comprendre le comportement asynchrone permet aux développeurs de créer des applications plus réactives, capables de récupérer les données des API en temps réel sans affecter le thread principal.

Gérer les requêtes asynchrones nécessite de gérer les réponses et diverses erreurs pouvant survenir au cours du processus. Par exemple, une difficulté courante lors de la récupération de données à partir d'API externes est le renvoi d'une valeur non définie, comme le démontre l'erreur dans le cas initial. Lorsque les développeurs ne parviennent pas à gérer efficacement les exceptions, leur application peut planter ou produire des résultats inexacts. Une gestion efficace des erreurs, comme les blocs try/catch ou les vérifications de l’état des réponses, est cruciale.

Outre la gestion des erreurs, la sécurité est une considération importante lors de l’interaction avec des API externes. Exposer des données sensibles ou accorder un accès direct aux API sans validation peut entraîner des vulnérabilités. Une solution consiste à implémenter des requêtes côté serveur, dans lesquelles les appels d'API sont effectués à partir d'un serveur backend, offrant ainsi un degré de sécurité supplémentaire. Cela interdit aux acteurs malveillants d'interférer avec les requêtes frontales ou d'obtenir directement des données sensibles via le navigateur. La sécurisation de ces connexions API est essentielle, en particulier lorsqu'il s'agit d'informations financières telles que les taux de bitcoin.