修复获取汇率时的 JavaScript 函数错误

JavaScript：修复“ReferenceError：btc 未定义”问题

在前端环境中，此方法利用 JavaScript 和 XMLHTTPRequest 来获取动态数据。

// Solution 1: Using XMLHTTPRequest to fetch cryptocurrency rates
function grate(from, to) {
  var burl = 'https://bitpay.com/rates/';
  var url = burl + from + '/' + to;
  var ourRequest = new XMLHttpRequest();
  ourRequest.open('GET', url, true);
  ourRequest.onload = function() {
    if (ourRequest.status >= 200 && ourRequest.status < 400) {
      var response = JSON.parse(ourRequest.responseText);
      document.body.innerHTML = 'Rate: ' + response.data.rate;
    } else {
      console.error('Error fetching the data');
    }
  };
  ourRequest.onerror = function() {
    console.error('Connection error');
  };
  ourRequest.send();
}
// Test the function with actual currency codes
grate('btc', 'usd');

JavaScript：Fetch API 是处理 API 请求的更现代的方法。

该解决方案利用 JavaScript 和 Fetch API 提高了现代前端应用程序的性能和故障处理能力。

// Solution 2: Using Fetch API for cleaner asynchronous requests
async function grate(from, to) {
  var burl = 'https://bitpay.com/rates/';
  var url = burl + from + '/' + to;
  try {
    let response = await fetch(url);
    if (!response.ok) throw new Error('Network response was not ok');
    let data = await response.json();
    document.body.innerHTML = 'Rate: ' + data.data.rate;
  } catch (error) {
    console.error('Fetch error: ', error);
  }
}
// Test the function with Fetch API
grate('btc', 'usd');

Node.js 后端：使用 Node 的 HTTP 模块发出 API 请求

此方法使用 Node.js 和后端应用程序中的 HTTP 模块获取货币汇率。

// Solution 3: Using Node.js HTTP module to fetch data from API
const http = require('http');
function grate(from, to) {
  const url = 'http://bitpay.com/rates/' + from + '/' + to;
  http.get(url, (resp) => {
    let data = '';
    resp.on('data', (chunk) => { data += chunk; });
    resp.on('end', () => {
      let rateData = JSON.parse(data);
      console.log('Rate: ' + rateData.data.rate);
    });
  }).on('error', (err) => {
    console.log('Error: ' + err.message);
  });
}
// Test the Node.js function
grate('btc', 'usd');

使用 Jest 进行前端解决方案的单元测试

JavaScript Fetch API 解决方案的功能通过使用 Jest 编写的单元测试进行验证。

// Solution 4: Unit testing Fetch API using Jest
const fetchMock = require('jest-fetch-mock');
fetchMock.enableMocks();
test('grate() fetches correct rate data', async () => {
  fetch.mockResponseOnce(JSON.stringify({ data: { rate: 50000 }}));
  const rate = await grate('btc', 'usd');
  expect(document.body.innerHTML).toBe('Rate: 50000');
});

有关使用 JavaScript 获取 API 数据的常见问题

1. 有什么区别 XMLHttpRequest 和 Fetch API？
2. 虽然两者都可用于发送 HTTP 查询，但 Fetch API 更新并具有更简单的界面。它使用 Promise，这使得处理异步进程变得更加容易。
3. 使用时出现错误如何处理 Fetch API？
4. 要处理错误，请将您的获取请求封装在 try/catch 阻止并检查响应状态。这使您的代码对故障更具弹性。
5. 为什么在尝试从 API 检索数据时收到未定义的值？
6. 当 API 端点或参数不正确，或者未使用正确处理响应时，通常会发生这种情况 JSON.parse()。
7. 我可以在没有实际网络调用的情况下测试 API 请求吗？
8. 是的，您可以使用类似的库 jest-fetch-mock 在 Jest 中模仿 API 查询和答案进行测试。
9. 如何提高 API 请求的安全性？
10. 提高安全性的一种选择是从后端服务器而不是前端发出请求。这会隐藏重要的 API 密钥并保护您的应用程序免受恶意行为者的侵害。

关于处理 API 错误和请求的最终想法

了解如何处理 JavaScript 中的 API 调用对于开发动态应用程序至关重要。使用XMLHttpRequest和Fetch API等技术，开发人员可以有效地检索加密货币价格等实时数据。然而，诸如未定义属性之类的典型问题必须得到妥善解决。

实施适当的错误处理和测试程序可以使您的代码更加可靠。无论您是开发前端还是后端应用程序，保护 API 调用并实施现代方法都将带来更安全、更高效的在线解决方案。