Oprava selhání volání funkce JavaScript: Referenční chyba kvůli nedefinovaným proměnným

Pochopení chyby JavaScript ReferenceError a jejích oprav

V JavaScriptu je vidět a ReferenceError může být nepříjemné, zvláště když zastaví provádění vašeho kódu. Jedním převládajícím scénářem je, že proměnné nejsou před použitím specifikovány, což vede k takovým chybám.

Problém je kolem volání funkce, která načítá data z externího API. Tento konkrétní problém pochází z toho, že proměnné nejsou správně deklarovány ve volání funkce. Při nesprávném zacházení může dojít k poškození kódu.

Ať už pracujete s JavaScript API nebo vytváříte skript s dynamickými hodnotami, je nutné specifikovat proměnné, než je předáte. Pokud ne, můžete obdržet zprávu "ReferenceError: proměnná není definována".

Tento příspěvek vysvětlí, jak změnit funkci JavaScriptu, abyste opravili ReferenceError. Také si projdeme, jak správně definovat a předat parametry, abychom se tomuto problému v budoucích implementacích vyhnuli.

Řešení ReferenceError ve voláních JavaScript API

V nabízených příkladech jsou skripty JavaScript určeny k načítání směnných kurzů z API, konkrétně ze služby BitPay. Hlavním problémem je a ReferenceError generované nedefinovanými proměnnými při použití gc() funkce. Chcete-li to vyřešit, prvním krokem je zajistit, aby parametry dodané funkci, jako například 'eth' a 'usd', byly správně deklarovány jako řetězce. Nedefinované proměnné nelze zpracovat pomocí JavaScriptu, proto jejich zapouzdření do uvozovek řeší problém a umožňuje, aby požadavek na načtení pokračoval se správnou konstrukcí adresy URL.

Rozhraní API pro načítání je kritickou součástí tohoto přístupu a umožňuje skriptu získávat data asynchronně z externího serveru. V tomto příkladu get() odešle požadavek HTTP na adresu URL určenou dvěma parametry (var1 a var2). Struktura URL je kritická a její dynamické generování zaručuje volání příslušného koncového bodu na základě vstupu uživatele. Po načtení jsou data analyzována pomocí res.json() převést odpověď do formátu JSON. Výsledný směnný kurz se pak zobrazí v těle HTML pomocí úpravy DOM, která aktualizuje uživatelské rozhraní v reálném čase.

Ve verzi Node.js používáme axios namísto fetch, robustnější balíček pro zpracování požadavků HTTP v backendových kontextech. Axios zlepšuje zpracování chyb a zjednodušuje proces analýzy odezvy. Ve skriptu axios odešle požadavek GET na koncový bod API, shromáždí data a zobrazí směnný kurz v konzole. Kromě toho skript zajišťuje, že oba parametry jsou poskytnuty do funkce před provedením volání API, čímž se odstraní další potenciální zdroj chyb.

Pro ověření stability těchto funkcí byly napsány testy jednotek pomocí Žert rámec. Tyto testy zfalšují knihovnu axios, aby replikovaly úspěšná i neúspěšná volání API. To nám pomáhá zajistit, aby funkce pokryla všechny možné scénáře, například když API poskytuje platnou rychlost nebo když dojde k chybě, jako je výpadek sítě. Zahrnutím těchto testů můžeme s jistotou uvolnit kód v produkčním prostředí s vědomím, že bude fungovat podle očekávání. Použití front-end i back-end řešení zajišťuje úplné vyřešení problému s důrazem na zvýšení výkonu a odolnosti proti chybám.

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

Zpracování definic proměnných ve voláních JavaScript API

Správný rozsah proměnných a inicializace jsou klíčové pro řešení ReferenceError v JavaScriptu, zejména při práci s voláním API. Chcete-li správně definovat a deklarovat proměnné v JavaScriptu, použijte nechat nebo konst. Selhání při deklarování proměnných před použitím nebo jejich volání mimo jejich rozsah často vede k chybám jako "ReferenceError: proměnná není definována." Při vytváření dotazů API je důležité zajistit, aby byly argumenty správně vyplněny.

Při vývoji aplikací, které jsou propojeny s externími rozhraními API, musíte navíc zvážit asynchronní povahu akcí. Zatímco rozhraní fetch API zpracovává asynchronní aktivity pomocí slibů, je důležité přidat zpracování chyb zkuste...chytit bloky nebo použijte .chytit() funkce po příslibu zachytit pravděpodobné poruchy. Tím se zabrání tomu, aby neočekávané problémy přerušily celou aplikaci. Dobré zpracování chyb zlepšuje uživatelskou zkušenost tím, že poskytuje řádné selhání a relevantní chybové zprávy.

Kromě toho by se mělo řešit zabezpečení při řešení externích dotazů API. Musíte ověřovat všechna příchozí data, zejména při práci s proměnlivými parametry, jako jsou v naší situaci měny. Dezinfekce vstupů před odesláním požadavku na rozhraní API může pomoci zabránit potenciálním bezpečnostním chybám, jako je zneužití rozhraní API nebo útoky vstřikování. Dodržování osvědčených postupů pro ověřování vstupů a vyhýbání se přímému používání dat generovaných uživateli v adresách URL je důležitou taktikou v moderním vývoji webu.