修复 JavaScript 函数调用失败：由于未定义变量而导致的 ReferenceError

了解 JavaScript ReferenceError 及其修复

在 JavaScript 中，看到 可能很烦人，尤其是当它停止执行代码时。一种常见的情况是变量在使用前没有指定，从而导致此类错误。

问题在于调用从外部 API 检索数据的函数。此特定问题源于函数调用中未正确声明变量。如果处理不当，这可能会导致您的代码崩溃。

无论您是使用 JavaScript API 还是构建具有动态值的脚本，都必须在传递变量之前指定变量。如果没有，您可能会收到“ReferenceError：变量未定义”消息。

这篇文章将解释如何改变你的 JavaScript 函数来修复 。我们还将讨论如何正确定义和传递参数，以避免在未来的实现中出现此问题。

命令	使用示例
fetch()	这 命令向给定的 URL 发起网络请求。在本例中，它从 API 接收汇率并提供承诺，允许我们执行异步任务，例如从外部服务检索数据。
then()	这 方法处理已履行的承诺的响应。后 接收API数据， 处理 API 提供的 JSON 数据。
catch()	这 方法被添加到承诺链中以管理错误。在此示例中，它检测并记录提取操作期间发生的问题，例如网络中断或错误回复。
axios.get()	Node.js 示例使用 将 HTTP GET 请求发送到 API 端点。该函数简化了 HTTP 查询并返回一个用服务器数据解析的承诺。
mockResolvedValue()	在 Jest 测试中， 用于嘲笑的行为 返回受控答案。这可确保单元测试模拟 API 成功情况。
mockRejectedValue()	类似于 ， 这 Jest 中的方法复制错误响应，例如网络问题，使我们能够测试函数如何处理故障。
expect()	是一个 Jest 函数，用于断言测试中的预期结果。在这些实例中，它确保返回正确的速率，或者在 API 请求失败时抛出异常。
rejects.toThrow()	开玩笑使用 方法来确保 Promise 返回错误。在评估函数如何处理被拒绝的 API 调用（例如伪造网络问题）时，这尤其有用。
document.body.innerHTML	DOM 操作命令 修改页面上body元素的内容。在该示例中，所获取的货币汇率动态地显示在网页上。

解决 JavaScript API 调用中的 ReferenceError

在提供的示例中，JavaScript 脚本旨在从 API（特别是 BitPay 服务）检索汇率。主要问题是一个 使用时由未定义的变量生成 功能。为了解决这个问题，第一步是确保提供给函数的参数（例如“eth”和“usd”）被正确声明为字符串。 JavaScript 无法处理未定义的变量，因此将它们封装在引号中可以解决该问题，并允许获取请求继续进行正确的 URL 构造。

获取 API 是此方法的关键组件，允许脚本从外部服务器异步获取数据。在此示例中，get() 将 HTTP 请求发送到两个参数（var1 和 var2）指定的 URL。 URL 结构至关重要，其动态生成保证了根据用户输入调用适当的端点。检索数据后，使用以下方法对其进行解析 将响应转换为 JSON 格式。然后，最终的汇率通过 DOM 修改显示在 HTML 正文中，从而实时更新用户界面。

在 Node.js 版本中，我们使用 代替 fetch，这是一个更强大的包，用于在后端上下文中处理 HTTP 请求。 Axios 改进了错误处理并简化了响应解析过程。在脚本中，axios 向 API 端点发出 GET 请求，收集数据，并在控制台中显示汇率。此外，该脚本确保在执行 API 调用之前将两个参数提供给函数，从而消除了另一个潜在的错误源。

为了验证这些功能的稳定性，使用以下代码编写了单元测试 框架。这些测试欺骗 axios 库来复制成功和失败的 API 调用。这有助于我们确保该功能涵盖所有可能的场景，例如当 API 提供有效速率时或发生错误（例如网络中断）时。通过包含这些测试，我们可以自信地在生产环境中发布代码，并知道它将按预期执行。前端和后端解决方案的使用可确保问题得到充分解决，重点是提高性能和错误恢复能力。

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

处理 JavaScript API 调用中的变量定义

正确的变量作用域和初始化对于处理 在 JavaScript 中，特别是在处理 API 调用时。要在 JavaScript 中正确定义和声明变量，请使用 或者 。在使用前未能声明变量，或者在其范围之外调用它们，经常会导致诸如“ReferenceError：变量未定义”之类的错误。进行 API 查询时，确保正确填充参数至关重要。

在开发与外部 API 交互的应用程序时，您还必须考虑操作的异步性质。虽然 fetch API 使用 Promise 处理异步活动，但添加错误处理至关重要 块或使用 在承诺捕获可能的失败之后运行。这可以防止意外问题中断整个应用程序。良好的错误处理通过提供优雅的失败和相关错误消息来改善用户体验。

此外，在处理外部 API 查询时应解决安全问题。您必须验证所有传入数据，尤其是在处理可变参数（例如我们情况下的货币）时。在发出 API 请求之前清理输入有助于防止潜在的安全漏洞，例如 API 滥用或注入攻击。遵循输入验证的最佳实践并避免在 URL 中直接使用用户生成的数据是现代 Web 开发中的一个重要策略。

1. JavaScript 中出现 ReferenceError 的原因是什么？
2. 当变量在定义之前被使用时，就会发生引用错误。为了防止这种情况发生，请始终将变量声明为 或者 在调用它们之前。
3. 如何修复“eth 未定义”错误？
4. 确保“eth”作为字符串提供，而不是未定义的变量。调用函数 。
5. 脚本中的fetch()的作用是什么？
6. 这 函数向 API 端点发送 HTTP 请求。它返回一个解析为来自外部服务的数据的承诺。
7. 如何处理 API 调用过程中的错误？
8. 要处理错误，请使用 在承诺之后或将代码包装在 阻止捕获异常。
9. JavaScript 中的 let 和 var 有什么区别？
10. 是块作用域的，这意味着它只存在于最近的一组大括号内，但是 是函数范围的，如果使用不当，可能会导致意外行为。

纠正 JavaScript 中的“ReferenceError”主要需要确保变量在使用前正确定义。将“eth”等参数定义为字符串并验证输入以解决当前问题。

该策略与充分的错误处理相结合 和输入验证，可以生成用于处理外部 API 的弹性代码。这可确保更高效的流程和更好的用户体验，同时减少运行时错误。