JavaScripti funktsiooni kutsumise tõrke parandamine: viiteviga määratlemata muutujate tõttu

JavaScripti viitevea ja selle paranduste mõistmine

JavaScriptis näete a Viiteviga võib olla tüütu, eriti kui see peatab teie koodi täitmise. Üks levinud stsenaarium on see, et muutujaid ei määrata enne kasutamist, mistõttu tekivad sellised vead.

Probleem seisneb funktsiooni kutsumises, mis hangib andmeid välisest API-st. See konkreetne probleem tuleneb muutujatest, mida funktsioonikutses õigesti ei deklareeritud. Kui seda ei käsitleta õigesti, võib see põhjustada teie koodi purunemise.

Olenemata sellest, kas töötate JavaScripti API-dega või koostate dünaamiliste väärtustega skripti, tuleb muutujad enne nende edastamist täpsustada. Kui ei, võite saada teate "ReferenceError: muutuja pole määratletud".

See postitus selgitab, kuidas muuta JavaScripti funktsiooni selle parandamiseks Viiteviga. Samuti käsitleme seda, kuidas parameetreid õigesti määratleda ja edastada, et seda probleemi tulevastes rakendustes vältida.

ReferenceError lahendamine JavaScripti API kutsetes

Pakutud näidetes on JavaScripti skriptid mõeldud vahetuskursside hankimiseks API-st, täpsemalt BitPay teenusest. Põhiküsimus on a Viiteviga mida genereerivad määramata muutujad, kasutades gc() funktsiooni. Selle probleemi lahendamiseks tuleb kõigepealt tagada, et funktsioonile antud parameetrid, nagu 'eth' ja 'usd', on stringidena õigesti deklareeritud. Määratlemata muutujaid ei saa JavaScript töödelda, seetõttu lahendab nende jutumärkidesse kapseldamine probleemi ja võimaldab hankimistaotlusel jätkata õige URL-i ehitusega.

Tõmbamise API on selle lähenemisviisi kriitiline komponent, mis võimaldab skriptil saada andmeid asünkroonselt välisest serverist. Selles näites saadab get() HTTP-päringu kahe parameetri (var1 ja var2) määratud URL-ile. URL-i struktuur on kriitiline ja selle dünaamiline genereerimine tagab, et kasutaja sisendi põhjal kutsutakse välja sobiv lõpp-punkt. Pärast andmete allalaadimist sõelutakse need kasutades res.json() vastuse teisendamiseks JSON-vormingusse. Saadud vahetuskurssi kuvatakse seejärel HTML-i kehas DOM-i modifikatsiooni kaudu, mis värskendab kasutajaliidest reaalajas.

Node.js versioonis kasutame aksiosid toomise asemel tugevam pakett HTTP-päringute käsitlemiseks taustakontekstis. Axios parandab vigade käsitlemist ja muudab vastuse sõelumise protsessi sujuvamaks. Skriptis teeb axios API lõpp-punktile GET-päringu, kogub andmed ja kuvab konsoolis vahetuskursi. Lisaks tagab skript, et mõlemad parameetrid lisatakse funktsiooni enne API-kõne sooritamist, eemaldades teise võimaliku veaallika.

Nende funktsioonide stabiilsuse kinnitamiseks kirjutati ühikutestid, kasutades Naljakas raamistik. Need testid võltsivad axiose teeki, et kopeerida nii edukaid kui ka ebaõnnestunud API-kutseid. See aitab meil tagada, et funktsioon katab kõik võimalikud stsenaariumid, näiteks kui API edastab kehtiva kiiruse või kui ilmneb tõrge (nt võrgukatkestus). Nende testide kaasamisega saame koodi tootmiskeskkondades julgelt välja anda, teades, et see toimib ootuspäraselt. Nii esi- kui ka tagaotsa lahenduste kasutamine tagab probleemi täieliku lahendamise, pannes rõhku nii jõudluse kui ka veakindluse suurendamisele.

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

Muutujate definitsioonide käsitlemine JavaScripti API kõnedes

Õige muutuja ulatus ja lähtestamine on käsitlemisel üliolulised Viiteviga JavaScriptis, eriti API-kutsete puhul. Muutujate õigeks määratlemiseks ja deklareerimiseks JavaScriptis kasutage lase või konst. Muutujate enne kasutamist deklareerimata jätmine või nende väljakutsumine väljaspool nende ulatust põhjustab sageli tõrketeateid, nagu „ReferenceError: muutuja pole määratletud”. API päringute tegemisel on oluline tagada, et argumendid oleksid õigesti täidetud.

Väliste API-dega liidetavate rakenduste väljatöötamisel peate lisaks arvestama toimingute asünkroonsusega. Kuigi toomise API käsitleb asünkroonseid tegevusi lubadusi kasutades, on oluline lisada veakäsitlus proovi... püüa kinni blokeerib või kasutage .catch() funktsioon pärast lubadust võimalike tõrgete tabamiseks. See hoiab ära ootamatute probleemide katkestamise kogu rakenduse töös. Hea veakäsitlus parandab kasutajakogemust, pakkudes graatsilisi tõrkeid ja asjakohaseid veateateid.

Lisaks tuleks väliste API päringutega tegelemisel tähelepanu pöörata turvalisusele. Peate kinnitama kõik sissetulevad andmed, eriti kui käsitlete muutuvaid parameetreid, nagu meie olukorras olevad valuutad. Sisendite desinfitseerimine enne API päringu esitamist võib aidata vältida võimalikke turvaauke, nagu API väärkasutus või süstimisrünnakud. Sisendi valideerimise parimate tavade järgimine ja kasutajate loodud andmete otsese kasutamise vältimine URL-ides on tänapäevase veebiarenduse oluline taktika.