Remedierea eșecului apelului funcției JavaScript: ReferenceError din cauza variabilelor nedefinite

Înțelegerea erorii de referință JavaScript și a remedierilor sale

În JavaScript, văzând a ReferenceError poate fi enervant, mai ales când oprește execuția codului tău. Un scenariu predominant este că variabilele nu sunt specificate înainte de utilizare, rezultând astfel de erori.

Problema este apelarea unei funcții care preia date dintr-un API extern. Această problemă particulară provine din variabilele care nu sunt declarate corect în apelul funcției. Dacă nu este manipulat corespunzător, acest lucru poate duce la întreruperea codului.

Indiferent dacă lucrați cu API-uri JavaScript sau construiți un script cu valori dinamice, este necesar să specificați variabilele înainte de a le transmite. Dacă nu, este posibil să primiți mesajul „ReferenceError: variable is not defined”.

Această postare va explica cum să vă modificați funcția JavaScript pentru a remedia ReferenceError. Vom analiza, de asemenea, cum să definim corect și să trecem parametrii pentru a evita această problemă în implementările viitoare.

Rezolvarea ReferenceError în apelurile API JavaScript

În exemplele oferite, scripturile JavaScript sunt destinate să recupereze ratele de schimb dintr-un API, în special serviciul BitPay. Problema principală este a ReferenceError generate de variabile nedefinite în timpul utilizării gc() funcţie. Pentru a rezolva acest lucru, primul pas este să vă asigurați că parametrii furnizați funcției, cum ar fi „eth” și „usd”, sunt declarați corect ca șiruri. Variabilele nedefinite nu pot fi procesate de JavaScript, prin urmare, încapsularea lor între ghilimele rezolvă problema și permite cererii de preluare să continue cu construcția corectă a adresei URL.

API-ul fetch este o componentă critică a acestei abordări, permițând scriptului să obțină date asincron de la un server extern. În acest exemplu, get() trimite o solicitare HTTP către adresa URL specificată de cei doi parametri (var1 și var2). Structura URL este critică, iar generarea sa dinamică garantează că punctul final adecvat este apelat pe baza intrării utilizatorului. După preluarea datelor, acestea sunt analizate folosind res.json() pentru a converti răspunsul în format JSON. Cursul de schimb rezultat este apoi afișat în corpul HTML prin modificarea DOM, care actualizează interfața cu utilizatorul în timp real.

În versiunea Node.js, folosim axios în loc de preluare, un pachet mai robust pentru gestionarea solicitărilor HTTP în contexte backend. Axios îmbunătățește gestionarea erorilor și simplifică procesul de analizare a răspunsurilor. În script, axios face o solicitare GET către punctul final API, colectează datele și afișează cursul de schimb în consolă. În plus, scriptul asigură că ambii parametri sunt furnizați în funcție înainte de a efectua apelul API, eliminând o altă sursă potențială de eroare.

Pentru a valida stabilitatea acestor funcționalități, au fost scrise teste unitare folosind Glumă cadru. Aceste teste falsifică biblioteca axios pentru a reproduce atât apelurile API reușite, cât și cele eșuate. Acest lucru ne ajută să ne asigurăm că funcția acoperă toate scenariile posibile, cum ar fi atunci când API-ul oferă o rată validă sau când apare o eroare, cum ar fi o întrerupere a rețelei. Prin includerea acestor teste, putem lansa cu încredere codul în medii de producție, știind că va funcționa conform așteptărilor. Utilizarea ambelor soluții front-end și back-end asigură soluționarea completă a problemei, cu accent pe creșterea atât a performanței, cât și a rezistenței la erori.

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

Gestionarea definițiilor de variabile în apelurile API JavaScript

Domeniul de aplicare adecvat al variabilei și inițializarea sunt cruciale pentru a trata ReferenceError în JavaScript, în special atunci când aveți de-a face cu apeluri API. Pentru a defini și a declara corect variabile în JavaScript, utilizați lasa sau const. Nedeclararea variabilelor înainte de utilizare sau apelarea acestora în afara domeniului lor de aplicare, duce frecvent la erori precum „Eroare de referință: variabila nu este definită”. Când faceți interogări API, este esențial să vă asigurați că argumentele sunt populate corect.

Când dezvoltați aplicații care interacționează cu API-uri externe, trebuie să luați în considerare și natura asincronă a acțiunilor. În timp ce API-ul de preluare gestionează activități asincrone folosind promisiuni, este vital să adăugați gestionarea erorilor cu încearcă...prind blocați sau utilizați .captură() funcţionează după o promisiune de a surprinde eşecurile probabile. Acest lucru previne problemele neașteptate să întrerupă întreaga aplicație. O bună gestionare a erorilor îmbunătățește experiența utilizatorului, oferind eșec grațios și mesaje de eroare relevante.

În plus, securitatea ar trebui să fie abordată atunci când se ocupă de interogări externe API. Trebuie să validați toate datele primite, mai ales când aveți de-a face cu parametri modificabili, cum ar fi valutele în situația noastră. Dezinfectarea intrărilor înainte de a face o solicitare API poate ajuta la prevenirea potențialelor vulnerabilități de securitate, cum ar fi utilizarea greșită a API-ului sau atacurile prin injecție. Urmărirea celor mai bune practici pentru validarea intrărilor și evitarea utilizării directe a datelor generate de utilizatori în adrese URL este o tactică importantă în dezvoltarea web modernă.