JavaScript-funktion kutsuvirheen korjaaminen: ReferenceError johtuen määrittelemättömistä muuttujista

JavaScript ReferenceError -virheen ja sen korjausten ymmärtäminen

JavaScriptissä a ReferenceError voi olla ärsyttävää, varsinkin kun se pysäyttää koodisi suorittamisen. Yksi yleinen skenaario on, että muuttujia ei määritetä ennen käyttöä, mikä johtaa tällaisiin virheisiin.

Ongelmana on funktion kutsuminen, joka hakee tietoja ulkoisesta API:sta. Tämä ongelma johtuu siitä, että muuttujia ei ole ilmoitettu oikein funktiokutsussa. Jos sitä ei käsitellä oikein, koodi voi rikkoutua.

Työskenteletpä JavaScript-sovellusliittymien kanssa tai luot dynaamisia arvoja sisältävää komentosarjaa, muuttujat on määritettävä ennen niiden välittämistä. Jos ei, saatat saada "ReferenceError: muuttujaa ei ole määritetty" -viestin.

Tämä viesti selittää, kuinka voit muuttaa JavaScript-toimintoasi korjaamaan ReferenceError. Käymme myös läpi, kuinka parametrit määritellään ja välitetään oikein tämän ongelman välttämiseksi tulevissa toteutuksissa.

Ratkaistaan ​​ReferenceError JavaScript API -kutsuissa

Tarjotuissa esimerkeissä JavaScript-komentosarjat on tarkoitettu noutamaan valuuttakursseja API:sta, erityisesti BitPay-palvelusta. Pääkysymys on a ReferenceError määrittämättömien muuttujien luoma, kun käytetään gc() toiminto. Tämän ratkaisemiseksi ensimmäinen askel on varmistaa, että funktiolle syötetyt parametrit, kuten 'eth' ja 'usd', on ilmoitettu oikein merkkijonoina. Määrittämättömiä muuttujia ei voida käsitellä JavaScriptillä, joten niiden kapseloiminen lainausmerkkeihin ratkaisee ongelman ja sallii hakupyynnön edetä oikean URL-osoitteen rakentamisessa.

Haku-API on tämän lähestymistavan kriittinen osa, jonka avulla komentosarja voi saada tietoja asynkronisesti ulkoisesta palvelimesta. Tässä esimerkissä get() lähettää HTTP-pyynnön kahden parametrin (muuttuja1 ja var2) määrittelemään URL-osoitteeseen. URL-rakenne on kriittinen, ja sen dynaaminen luominen takaa, että oikea päätepiste kutsutaan käyttäjän syötteen perusteella. Tietojen haun jälkeen ne jäsennetään käyttämällä res.json() muuntaaksesi vastauksen JSON-muotoon. Tuloksena oleva valuuttakurssi näytetään sitten HTML-tekstissä DOM-muokkauksen kautta, joka päivittää käyttöliittymän reaaliajassa.

Node.js-versiossa käytämme aksiot haun sijasta vankempi paketti HTTP-pyyntöjen käsittelemiseen taustaympäristöissä. Axios parantaa virheiden käsittelyä ja virtaviivaistaa vastausten jäsennysprosessia. Skriptissä axios tekee GET-pyynnön API-päätepisteelle, kerää tiedot ja näyttää vaihtokurssin konsolissa. Lisäksi komentosarja varmistaa, että molemmat parametrit toimitetaan toimintoon ennen API-kutsun suorittamista, mikä poistaa toisen mahdollisen virhelähteen.

Näiden toimintojen vakauden vahvistamiseksi yksikkötestit kirjoitettiin käyttämällä Jest puitteet. Nämä testit huijaavat axios-kirjastoa replikoimaan sekä onnistuneita että epäonnistuneita API-kutsuja. Tämä auttaa meitä varmistamaan, että toiminto kattaa kaikki mahdolliset skenaariot, kuten kun API toimittaa kelvollisen nopeuden tai kun tapahtuu virhe, kuten verkkokatkos. Sisällyttämällä nämä testit voimme luottavaisesti julkaista koodin tuotantoympäristöissä tietäen, että se toimii odotetusti. Sekä käyttöliittymä- että taustaratkaisujen käyttö varmistaa, että ongelma ratkaistaan ​​täysin, painottaen sekä suorituskyvyn että virheensietokyvyn lisäämistä.

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

Muuttujien määritelmien käsittely JavaScript-sovellusliittymäkutsuissa

Oikea muuttujan laajuus ja alustus ovat ratkaisevan tärkeitä käsiteltäessä ReferenceError JavaScriptissä, erityisesti käsiteltäessä API-kutsuja. Määritä ja ilmoittaa muuttujat oikein JavaScriptissä käyttämällä anna tai konst. Muuttujien ilmoittamatta jättäminen ennen käyttöä tai niiden kutsuminen niiden soveltamisalan ulkopuolelle johtaa usein virheisiin, kuten "ReferenceError: muuttujaa ei ole määritetty". API-kyselyitä tehtäessä on tärkeää varmistaa, että argumentit on täytetty oikein.

Kun kehität sovelluksia, jotka ovat yhteydessä ulkoisiin sovellusliittymiin, sinun on lisäksi otettava huomioon toimintojen asynkronisuus. Vaikka hakusovellusliittymä käsittelee asynkronisia toimintoja lupausten avulla, on tärkeää lisätä virheiden käsittely yritä... ota kiinni lohkoja tai käytä .saalis() toiminto sen jälkeen, kun lupaus siepata todennäköiset viat. Tämä estää odottamattomia ongelmia keskeyttämästä koko sovellusta. Hyvä virheiden käsittely parantaa käyttökokemusta tarjoamalla sulavia virheitä ja asiaankuuluvia virheilmoituksia.

Lisäksi turvallisuuteen tulee kiinnittää huomiota käsiteltäessä ulkoisia API-kyselyitä. Sinun on vahvistettava kaikki saapuvat tiedot, etenkin kun käsittelet muuttuvia parametreja, kuten tilanteessamme olevia valuuttoja. Syötteiden puhdistaminen ennen API-pyynnön tekemistä voi auttaa estämään mahdollisia tietoturva-aukkoja, kuten API väärinkäyttöä tai injektiohyökkäyksiä. Parhaiden käytäntöjen noudattaminen syötteiden validoinnissa ja käyttäjien luomien tietojen suoran käytön välttäminen URL-osoitteissa on tärkeä taktiikka nykyaikaisessa verkkokehityksessä.