Correcció de l'error de trucada de funció JavaScript: ReferenceError a causa de variables no definides

Comprensió del JavaScript ReferenceError i les seves solucions

En JavaScript, veient a ReferenceError pot ser molest, sobretot quan atura l'execució del vostre codi. Un dels escenaris prevalents és que les variables no s'especifiquen abans de l'ús, cosa que provoca aquests errors.

El problema és cridar una funció que recupera dades d'una API externa. Aquest problema en particular s'origina perquè les variables no es declaren correctament a la trucada de funció. Si no es gestiona correctament, pot ser que el codi es trenqui.

Tant si treballeu amb API de JavaScript com si esteu construint un script amb valors dinàmics, és necessari especificar les variables abans de passar-les. Si no, podeu rebre el missatge "ReferenceError: variable is not defined".

En aquesta publicació s'explicarà com modificar la funció de JavaScript per solucionar el problema ReferenceError. També repassarem com definir i passar correctament els paràmetres per evitar aquest problema en futures implementacions.

Resolució de ReferenceError a les trucades de l'API JavaScript

En els exemples que s'ofereixen, els scripts de JavaScript estan destinats a recuperar els tipus de canvi d'una API, concretament el servei BitPay. La qüestió principal és a ReferenceError generat per variables no definides mentre s'utilitza el gc() funció. Per solucionar-ho, el primer pas és assegurar-se que els paràmetres subministrats a la funció, com ara 'eth' i 'usd', es declarin correctament com a cadenes. JavaScript no pot processar les variables no definides, per tant, encapsular-les entre cometes resol el problema i permet que la sol·licitud d'obtenció continuï amb la construcció de l'URL adequada.

L'API fetch és un component crític d'aquest enfocament, ja que permet que l'script obtingui dades de manera asíncrona d'un servidor extern. En aquest exemple, get() envia una sol·licitud HTTP a l'URL especificat pels dos paràmetres (var1 i var2). L'estructura de l'URL és crítica i la seva generació dinàmica garanteix que el punt final adequat sigui cridat en funció de l'entrada de l'usuari. Després de recuperar les dades, s'analitza mitjançant res.json() per convertir la resposta al format JSON. El tipus de canvi resultant es mostra al cos HTML mitjançant la modificació DOM, que actualitza la interfície d'usuari en temps real.

A la versió Node.js, fem servir axios en comptes de buscar, un paquet més robust per gestionar les sol·licituds HTTP en contextos de backend. Axios millora la gestió d'errors i racionalitza el procés d'anàlisi de respostes. A l'script, axios fa una sol·licitud GET al punt final de l'API, recull les dades i mostra el tipus de canvi a la consola. A més, l'script assegura que tots dos paràmetres es proporcionen a la funció abans de realitzar la trucada a l'API, eliminant una altra font potencial d'error.

Per validar l'estabilitat d'aquestes funcionalitats, es van escriure proves unitàries utilitzant el Broma marc. Aquestes proves falsifiquen la biblioteca axios per replicar tant les trucades d'API reeixides com les fallides. Això ens ajuda a assegurar-nos que la funció cobreix tots els escenaris possibles, com ara quan l'API ofereix una tarifa vàlida o quan es produeix un error, com ara una interrupció de la xarxa. En incloure aquestes proves, podem alliberar el codi amb confiança en entorns de producció, sabent que funcionarà com s'esperava. L'ús de solucions tant de front-end com de back-end garanteix que el problema s'abordi completament, posant èmfasi en augmentar el rendiment i la resistència als errors.

// Define the function with two parameters
function getRates(var1, var2) {
    // Define the URL with the parameters
    let url = 'https://bitpay.com/rates/' + var1 + '/' + var2;
    // Fetch data from the URL
    fetch(url)
    .then(res => {
        if (!res.ok) throw new Error('Network response was not ok');
        return res.json();
    })
    .then(out => {
        // Update the body with the rate
        document.body.innerHTML = 'Rate: ' + out.data.rate;
    })
    .catch(error => console.error('There was an error:', error));
}
// Correctly call the function with string parameters
getRates('eth', 'usd');

const axios = require('axios');
// Function to get exchange rates
function getRates(var1, var2) {
    // Validate input parameters
    if (!var1 || !var2) {
        throw new Error('Both currency parameters must be defined');
    }
    // Define the URL
    const url = 'https://bitpay.com/rates/' + var1 + '/' + var2;
    // Make the request using axios
    axios.get(url)
        .then(response => {
            console.log('Rate:', response.data.data.rate);
        })
        .catch(error => {
            console.error('Error fetching rate:', error.message);
        });
}
// Correctly call the function
getRates('eth', 'usd');

const axios = require('axios');
const { getRates } = require('./getRates');
jest.mock('axios');
// Test successful API call
test('should return correct rate', async () => {
    axios.get.mockResolvedValue({ data: { data: { rate: 2500 } } });
    const rate = await getRates('eth', 'usd');
    expect(rate).toBe(2500);
});
// Test API call failure
test('should handle error', async () => {
    axios.get.mockRejectedValue(new Error('Network Error'));
    await expect(getRates('eth', 'usd')).rejects.toThrow('Network Error');
});

Maneig de definicions de variables a les trucades de l'API de JavaScript

L'abast adequat de la variable i la inicialització són crucials per tractar-los ReferenceError en JavaScript, especialment quan es tracta de trucades a l'API. Per definir i declarar correctament variables en JavaScript, feu servir deixar o const. Si no es declaren variables abans d'utilitzar-les, o si es crida fora del seu abast, sovint es produeixen errors com "ReferenceError: variable is not defined". Quan feu consultes a l'API, és fonamental assegurar-vos que els arguments s'omplen correctament.

Quan desenvolupeu aplicacions que interactuen amb API externes, heu de tenir en compte, a més, la naturalesa asíncrona de les accions. Tot i que l'API fetch gestiona activitats asíncrones mitjançant promeses, és vital afegir la gestió d'errors amb provar... agafar blocs o utilitzar el .catch() funcionar després de la promesa de capturar possibles fracassos. Això evita que problemes inesperats interrompin tota l'aplicació. Un bon maneig d'errors millora l'experiència de l'usuari al proporcionar errors elegants i missatges d'error rellevants.

A més, s'ha de tenir en compte la seguretat mentre es tracten consultes d'API externes. Heu de validar totes les dades entrants, especialment quan tracteu amb paràmetres canviables com les monedes en la nostra situació. La desinfecció de les entrades abans de fer una sol·licitud d'API pot ajudar a prevenir possibles vulnerabilitats de seguretat, com ara l'ús indegut de l'API o els atacs d'injecció. Seguir les millors pràctiques per a la validació d'entrada i evitar l'ús directe de les dades generades per l'usuari a les URL és una tàctica important en el desenvolupament web modern.