Sửa lỗi cuộc gọi hàm JavaScript: ReferenceError do các biến không xác định

Tìm hiểu về lỗi tham chiếu JavaScript và các cách sửa lỗi

Trong JavaScript, nhìn thấy một Lỗi tham chiếu có thể gây khó chịu, đặc biệt là khi nó dừng việc thực thi mã của bạn. Một tình huống phổ biến là các biến không được chỉ định trước khi sử dụng, dẫn đến những lỗi như vậy.

Vấn đề xoay quanh việc gọi một hàm lấy dữ liệu từ API bên ngoài. Vấn đề cụ thể này bắt nguồn từ việc các biến không được khai báo đúng cách trong lệnh gọi hàm. Nếu không được xử lý đúng cách, điều này có thể khiến mã của bạn bị hỏng.

Cho dù bạn đang làm việc với API JavaScript hay đang xây dựng tập lệnh có giá trị động, bạn vẫn cần phải chỉ định các biến trước khi chuyển chúng. Nếu không, bạn có thể nhận được thông báo "ReferenceError: biến không được xác định".

Bài đăng này sẽ giải thích cách thay đổi chức năng JavaScript của bạn để sửa lỗi Lỗi tham chiếu. Chúng ta cũng sẽ tìm hiểu cách xác định và truyền tham số chính xác để tránh vấn đề này trong quá trình triển khai trong tương lai.

Giải quyết lỗi tham chiếu trong lệnh gọi API JavaScript

Trong các ví dụ được cung cấp, các tập lệnh JavaScript nhằm truy xuất tỷ giá hối đoái từ API, cụ thể là dịch vụ BitPay. Vấn đề chính là một Lỗi tham chiếu được tạo bởi các biến không xác định trong khi sử dụng gc() chức năng. Để giải quyết vấn đề này, bước đầu tiên là đảm bảo rằng các tham số được cung cấp cho hàm, chẳng hạn như 'eth' và 'usd', được khai báo chính xác dưới dạng chuỗi. JavaScript không thể xử lý các biến không xác định, do đó việc đóng gói chúng trong dấu ngoặc kép sẽ giải quyết được vấn đề và cho phép yêu cầu tìm nạp tiếp tục xây dựng URL thích hợp.

API tìm nạp là một thành phần quan trọng của phương pháp này, cho phép tập lệnh lấy dữ liệu không đồng bộ từ máy chủ bên ngoài. Trong ví dụ này, get() gửi yêu cầu HTTP tới URL được chỉ định bởi hai tham số (var1 và var2). Cấu trúc URL rất quan trọng và việc tạo động của nó đảm bảo rằng điểm cuối thích hợp được gọi dựa trên đầu vào của người dùng. Sau khi lấy dữ liệu, nó được phân tích bằng cách sử dụng res.json() để chuyển đổi phản hồi sang định dạng JSON. Tỷ giá hối đoái thu được sau đó được hiển thị trong phần nội dung HTML thông qua sửa đổi DOM, cập nhật giao diện người dùng theo thời gian thực.

Trong phiên bản Node.js, chúng tôi sử dụng trục thay vì tìm nạp, một gói mạnh mẽ hơn để xử lý các yêu cầu HTTP trong ngữ cảnh phụ trợ. Axios cải thiện việc xử lý lỗi và hợp lý hóa quy trình phân tích cú pháp phản hồi. Trong tập lệnh, axios thực hiện yêu cầu GET tới điểm cuối API, thu thập dữ liệu và hiển thị tỷ giá hối đoái trong bảng điều khiển. Hơn nữa, tập lệnh còn đảm bảo rằng cả hai tham số đều được cung cấp vào hàm trước khi thực hiện lệnh gọi API, loại bỏ một nguồn lỗi tiềm ẩn khác.

Để xác nhận tính ổn định của các chức năng này, các bài kiểm tra đơn vị đã được viết bằng cách sử dụng trò đùa khuôn khổ. Các thử nghiệm này giả mạo thư viện axios để sao chép cả lệnh gọi API thành công và thất bại. Điều này giúp chúng tôi đảm bảo rằng chức năng này bao gồm tất cả các tình huống có thể xảy ra, chẳng hạn như khi API cung cấp tỷ lệ hợp lệ hoặc khi xảy ra lỗi, chẳng hạn như mất mạng. Bằng cách đưa các thử nghiệm này vào, chúng tôi có thể tự tin phát hành mã trong môi trường sản xuất và biết rằng mã sẽ hoạt động như mong đợi. Việc sử dụng cả giải pháp front-end và back-end đảm bảo rằng vấn đề được giải quyết triệt để, tập trung vào việc tăng cả hiệu suất và khả năng phục hồi lỗi.

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

Xử lý các định nghĩa biến trong lệnh gọi API JavaScript

Phạm vi biến thích hợp và khởi tạo là rất quan trọng để xử lý Lỗi tham chiếu trong JavaScript, đặc biệt khi xử lý các lệnh gọi API. Để xác định và khai báo đúng các biến trong JavaScript, hãy sử dụng cho phép hoặc hằng số. Việc không khai báo các biến trước khi sử dụng hoặc gọi chúng ngoài phạm vi của chúng thường dẫn đến các lỗi như "ReferenceError: biến không được xác định". Khi thực hiện truy vấn API, điều quan trọng là phải đảm bảo rằng các đối số được điền chính xác.

Khi phát triển các ứng dụng có giao diện với các API bên ngoài, bạn phải xem xét thêm tính chất không đồng bộ của các hành động. Mặc dù API tìm nạp xử lý các hoạt động không đồng bộ bằng lời hứa, nhưng điều quan trọng là phải thêm tính năng xử lý lỗi bằng thử...bắt khối hoặc sử dụng .nắm lấy() hoạt động sau một lời hứa sẽ nắm bắt những thất bại có thể xảy ra. Điều này ngăn chặn các sự cố không mong muốn làm gián đoạn toàn bộ ứng dụng. Xử lý lỗi tốt sẽ cải thiện trải nghiệm người dùng bằng cách cung cấp các thông báo lỗi nhẹ và có liên quan.

Hơn nữa, vấn đề bảo mật cần được giải quyết khi xử lý các truy vấn API bên ngoài. Bạn phải xác thực tất cả dữ liệu đến, đặc biệt khi xử lý các tham số có thể thay đổi, chẳng hạn như tiền tệ trong trường hợp của chúng tôi. Việc dọn dẹp đầu vào trước khi thực hiện yêu cầu API có thể giúp ngăn chặn các lỗ hổng bảo mật tiềm ẩn như lạm dụng API hoặc tấn công tiêm nhiễm. Thực hiện theo các phương pháp hay nhất để xác thực đầu vào và tránh sử dụng trực tiếp dữ liệu do người dùng tạo trong URL là một chiến thuật quan trọng trong phát triển web hiện đại.