Membetulkan Kegagalan Panggilan Fungsi JavaScript: ReferenceError Disebabkan Pembolehubah Tidak Ditakrifkan

Memahami JavaScript ReferenceError dan Pembetulannya

Dalam JavaScript, melihat a ReferenceError boleh menjengkelkan, terutamanya apabila ia menghentikan pelaksanaan kod anda. Satu senario yang lazim ialah pembolehubah tidak dinyatakan sebelum penggunaan, mengakibatkan ralat sedemikian.

Masalahnya ialah sekitar memanggil fungsi yang mendapatkan semula data daripada API luaran. Isu khusus ini berpunca daripada pembolehubah yang tidak diisytiharkan dengan betul dalam panggilan fungsi. Jika tidak dikendalikan dengan betul, ini boleh menyebabkan kod anda rosak.

Sama ada anda bekerja dengan API JavaScript atau membina skrip dengan nilai dinamik, anda perlu menentukan pembolehubah sebelum menghantarnya. Jika tidak, anda mungkin menerima mesej "ReferenceError: variable is not definition".

Siaran ini akan menerangkan cara mengubah fungsi JavaScript anda untuk membetulkan ReferenceError. Kami juga akan membincangkan cara mentakrif dan lulus parameter dengan betul untuk mengelakkan isu ini dalam pelaksanaan masa hadapan.

Menyelesaikan ReferenceError dalam Panggilan API JavaScript

Dalam contoh yang ditawarkan, skrip JavaScript bertujuan untuk mendapatkan semula kadar pertukaran daripada API, khususnya perkhidmatan BitPay. Isu utama ialah a ReferenceError dijana oleh pembolehubah tidak ditentukan semasa menggunakan gc() fungsi. Untuk menangani perkara ini, langkah pertama ialah memastikan bahawa parameter yang dibekalkan kepada fungsi, seperti 'eth' dan 'usd', diisytiharkan dengan betul sebagai rentetan. Pembolehubah yang tidak ditentukan tidak boleh diproses oleh JavaScript, oleh itu merangkumnya dalam petikan menyelesaikan isu dan membenarkan permintaan pengambilan untuk meneruskan pembinaan URL yang betul.

API pengambilan ialah komponen penting dalam pendekatan ini, membenarkan skrip mendapatkan data secara tidak segerak daripada pelayan luaran. Dalam contoh ini, get() menghantar permintaan HTTP ke URL yang ditentukan oleh dua parameter (var1 dan var2). Struktur URL adalah kritikal dan penjanaan dinamiknya menjamin bahawa titik akhir yang sesuai dipanggil berdasarkan input pengguna. Selepas mendapatkan semula data, ia dihuraikan menggunakan res.json() untuk menukar respons kepada format JSON. Kadar pertukaran yang terhasil kemudian ditunjukkan dalam badan HTML melalui pengubahsuaian DOM, yang mengemas kini antara muka pengguna dalam masa nyata.

Dalam versi Node.js, kami menggunakan aksios bukannya mengambil, pakej yang lebih mantap untuk mengendalikan permintaan HTTP dalam konteks hujung belakang. Axios menambah baik pengendalian ralat dan menyelaraskan proses penghuraian respons. Dalam skrip, axios membuat permintaan GET ke titik akhir API, mengumpul data dan memaparkan kadar pertukaran dalam konsol. Selain itu, skrip memastikan bahawa kedua-dua parameter disediakan ke dalam fungsi sebelum melaksanakan panggilan API, mengalih keluar satu lagi sumber ralat yang berpotensi.

Untuk mengesahkan kestabilan fungsi ini, ujian unit ditulis menggunakan Jest rangka kerja. Ujian ini menipu perpustakaan axios untuk mereplikasi kedua-dua panggilan API yang berjaya dan gagal. Ini membantu kami memastikan bahawa fungsi itu meliputi semua senario yang mungkin, seperti apabila API menyampaikan kadar yang sah atau apabila ralat berlaku, seperti gangguan rangkaian. Dengan memasukkan ujian ini, kami dengan yakin boleh mengeluarkan kod dalam persekitaran pengeluaran, mengetahui bahawa ia akan berfungsi seperti yang diharapkan. Penggunaan kedua-dua penyelesaian bahagian hadapan dan bahagian belakang memastikan bahawa masalah itu ditangani sepenuhnya, dengan penekanan pada peningkatan kedua-dua prestasi dan daya tahan ralat.

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

Mengendalikan Definisi Pembolehubah dalam Panggilan API JavaScript

Skop pembolehubah yang betul dan permulaan adalah penting untuk ditangani ReferenceError dalam JavaScript, terutamanya apabila berurusan dengan panggilan API. Untuk mentakrif dan mengisytiharkan pembolehubah dengan betul dalam JavaScript, gunakan biarkan atau const. Kegagalan untuk mengisytiharkan pembolehubah sebelum penggunaan, atau memanggilnya di luar skopnya, kerap mengakibatkan ralat seperti "ReferenceError: variable is not definition." Apabila membuat pertanyaan API, adalah penting untuk memastikan bahawa hujah diisi dengan betul.

Apabila membangunkan aplikasi yang antara muka dengan API luaran, anda juga mesti mempertimbangkan sifat tak segerak bagi tindakan tersebut. Walaupun API pengambilan mengendalikan aktiviti tak segerak menggunakan janji, adalah penting untuk menambah pengendalian ralat dengan cuba...tangkap blok atau gunakan .catch() berfungsi selepas janji untuk menangkap kemungkinan kegagalan. Ini menghalang masalah yang tidak dijangka daripada mengganggu keseluruhan aplikasi. Pengendalian ralat yang baik meningkatkan pengalaman pengguna dengan menyediakan kegagalan yang anggun dan mesej ralat yang berkaitan.

Tambahan pula, keselamatan harus ditangani semasa berurusan dengan pertanyaan API luaran. Anda mesti mengesahkan semua data masuk, terutamanya apabila berurusan dengan parameter boleh ubah seperti mata wang dalam situasi kami. Membersihkan input sebelum membuat permintaan API boleh membantu menghalang potensi kelemahan keselamatan seperti penyalahgunaan API atau serangan suntikan. Mengikuti amalan terbaik untuk pengesahan input dan mengelakkan penggunaan terus data yang dijana pengguna dalam URL ialah taktik penting dalam pembangunan web moden.