JavaScript funkcijas izsaukuma kļūmes novēršana: atsauces kļūda nenoteiktu mainīgo dēļ

Izpratne par JavaScript atsauces kļūdu un tās labojumiem

Programmā JavaScript, redzot a Atsauces kļūda var būt kaitinoši, it īpaši, ja tas aptur jūsu koda izpildi. Viens no izplatītākajiem scenārijiem ir tāds, ka mainīgie nav norādīti pirms lietošanas, kā rezultātā rodas šādas kļūdas.

Problēma ir saistīta ar funkcijas izsaukšanu, kas izgūst datus no ārējā API. Šīs problēmas cēlonis ir mainīgie, kas nav pareizi deklarēti funkcijas izsaukumā. Ja netiks apstrādāts pareizi, kods var sabojāt.

Neatkarīgi no tā, vai strādājat ar JavaScript API vai veidojat skriptu ar dinamiskām vērtībām, pirms to nodošanas ir jānorāda mainīgie. Ja nē, iespējams, tiks parādīts ziņojums "ReferenceError: mainīgais nav definēts".

Šajā ziņojumā tiks paskaidrots, kā mainīt JavaScript funkciju, lai to labotu Atsauces kļūda. Mēs arī apskatīsim, kā pareizi definēt un nodot parametrus, lai izvairītos no šīs problēmas turpmākajā ieviešanā.

ReferenceError atrisināšana JavaScript API izsaukumos

Piedāvātajos piemēros JavaScript skripti ir paredzēti, lai izgūtu valūtas maiņas kursus no API, īpaši pakalpojuma BitPay. Galvenais jautājums ir a Atsauces kļūda ģenerē nedefinēti mainīgie, izmantojot gc() funkciju. Lai to atrisinātu, pirmais solis ir nodrošināt, lai funkcijai piegādātie parametri, piemēram, "eth" un "usd", tiktu pareizi deklarēti kā virknes. Nedefinētus mainīgos nevar apstrādāt ar JavaScript, tāpēc to iekapsulēšana pēdiņās atrisina problēmu un ļauj izgūšanas pieprasījumam turpināt pareizu URL veidošanu.

Ieneses API ir būtiska šīs pieejas sastāvdaļa, kas ļauj skriptam asinhroni iegūt datus no ārēja servera. Šajā piemērā get() nosūta HTTP pieprasījumu uz URL, kas norādīts ar diviem parametriem (var1 un var2). URL struktūra ir kritiska, un tās dinamiskā ģenerēšana garantē, ka atbilstošais galapunkts tiek izsaukts, pamatojoties uz lietotāja ievadi. Pēc datu izgūšanas tie tiek parsēti, izmantojot res.json() lai pārvērstu atbildi JSON formātā. Iegūtais maiņas kurss pēc tam tiek parādīts HTML pamattekstā, izmantojot DOM modifikāciju, kas reāllaikā atjaunina lietotāja interfeisu.

Node.js versijā mēs izmantojam axios ieneses vietā ir izturīgāka pakotne HTTP pieprasījumu apstrādei aizmugursistēmas kontekstos. Axios uzlabo kļūdu apstrādi un racionalizē atbildes parsēšanas procesu. Skriptā axios veic GET pieprasījumu API galapunktam, apkopo datus un parāda maiņas kursu konsolē. Turklāt skripts nodrošina, ka abi parametri tiek nodrošināti funkcijā pirms API izsaukuma veikšanas, novēršot citu iespējamo kļūdu avotu.

Lai apstiprinātu šo funkciju stabilitāti, tika rakstīti vienību testi, izmantojot Joks ietvaros. Šie testi maldina axios bibliotēku, lai atkārtotu gan veiksmīgus, gan neveiksmīgus API zvanus. Tas palīdz mums nodrošināt, ka funkcija aptver visus iespējamos scenārijus, piemēram, kad API nodrošina derīgu ātrumu vai rodas kļūda, piemēram, tīkla pārtraukums. Iekļaujot šos testus, mēs varam droši atbrīvot kodu ražošanas vidēs, zinot, ka tas darbosies, kā paredzēts. Gan priekšgala, gan aizmugures risinājumu izmantošana nodrošina pilnīgu problēmas risināšanu, liekot uzsvaru uz veiktspējas un kļūdu noturības palielināšanu.

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

Mainīgo definīciju apstrāde JavaScript API izsaukumos

Pareiza mainīgā darbības joma un inicializācija ir ļoti svarīgas, lai to risinātu Atsauces kļūda JavaScript, it īpaši, strādājot ar API izsaukumiem. Lai pareizi definētu un deklarētu mainīgos JavaScript, izmantojiet ļaut vai konst. Ja mainīgie netiek deklarēti pirms lietošanas vai tie tiek izsaukti ārpus to darbības jomas, bieži rodas kļūdas, piemēram, “Atsauces kļūda: mainīgais nav definēts”. Veicot API vaicājumus, ir ļoti svarīgi nodrošināt, lai argumenti būtu pareizi aizpildīti.

Izstrādājot lietojumprogrammas, kas saskaras ar ārējām API, papildus jāņem vērā darbību asinhronais raksturs. Lai gan ielādes API apstrādā asinhronās darbības, izmantojot solījumus, ir svarīgi pievienot kļūdu apstrādi ar pamēģini... noķer bloķē vai izmantojiet .catch() funkcija pēc solījuma fiksēt iespējamās kļūmes. Tas novērš neparedzētu problēmu pārtraukšanu visā lietojumprogrammā. Laba kļūdu apstrāde uzlabo lietotāja pieredzi, nodrošinot graciozu kļūdu un atbilstošus kļūdu ziņojumus.

Turklāt, strādājot ar ārējiem API vaicājumiem, jāpievērš uzmanība drošībai. Jums ir jāapstiprina visi ienākošie dati, īpaši, ja mūsu situācijā tiek risināti mainīgi parametri, piemēram, valūtas. Ievades datu tīrīšana pirms API pieprasījuma veikšanas var palīdzēt novērst iespējamās drošības ievainojamības, piemēram, API ļaunprātīgu izmantošanu vai injekcijas uzbrukumus. Ievades validācijas paraugprakses ievērošana un izvairīšanās no lietotāju ģenerētu datu tiešas izmantošanas vietrāžos URL ir svarīga taktika mūsdienu tīmekļa izstrādē.