Fixing JavaScript Function Errors When Fetching Exchange Rates

How to Resolve Errors in JavaScript Rate Fetching Functions

JavaScript is an effective tool for web development, particularly when working with external APIs. However, even experienced developers make typical mistakes when writing functions to retrieve data from APIs. One such issue happens when attempting to send arguments into a function and get undefined values in response.

This article discusses a difficulty with writing a JavaScript function that retrieves bitcoin rates between two currencies. The problem, "ReferenceError: btc is not defined," is frequently caused by incorrectly specified parameters and variables. These concerns can be avoided if the code is correctly structured.

We'll show you how to create a function named grate(from, to), which accepts two parameters and returns the exchange rate between the two currencies. By the end of this book, you will know how to properly pass arguments and manage errors during data fetching processes.

If you're experiencing similar problems or have received the error "Cannot read properties of undefined (reading 'rate')," this article will help you troubleshoot and resolve them effectively. Let's take a step-by-step look at how to fix these problems.

Understanding How JavaScript Functions Handle API Requests for Cryptocurrency Rates

The scripts supplied here demonstrate alternative techniques to get cryptocurrency exchange rates between two currencies using JavaScript. The first script makes use of the XMLHttpRequest object, which is one of the older techniques to handle asynchronous HTTP requests in JavaScript. The function grate(from, to) accepts two parameters: the currencies to convert. A URL is generated dynamically based on the supplied parameters, and a request is sent to Bitpay's API endpoint. After getting the answer, the data is parsed using JSON.parse() displays the exchange rate in the document body. This solution maintains compatibility with older browsers, but it lacks some newer capabilities such as promises, which are discussed in the second example.

In the second example, the Fetch API is utilized instead of XMLHttpRequest to do the same action. The Fetch API is more current and offers an easier way to make network requests. It leverages promises to make the asynchronous flow more readable and manageable. When the function is invoked, it makes an HTTP request to the same URL and waits for a response. After getting the response, it turns the data to a JSON object and obtains the rate. The Fetch API improves error management by using try/catch blocks to collect and manage any issues that arise during the request or data processing.

The third script targets a backend environment and makes API queries with Node.js's HTTP module. This is especially beneficial for developing server-side apps that need retrieving exchange rates. The HTTP module is built into Node.js and allows developers to conduct HTTP operations. This function creates the URL in the same manner as the previous scripts, sends a GET call to the API, and then parses the data received. The result is logged in the console rather than displayed in the browser, making it better suited for backend scenarios that do not require web browsers.

Finally, a Jest test suite is included to check that the Fetch API solution functions properly. Jest is a popular testing framework, and with jest-fetch-mock, we can imitate API responses in our tests. This enables developers to test their code without actually generating network queries, which speeds up the testing process and isolates potential bugs. The tests verify that the rate data is successfully obtained and displayed in the document body, confirming that the function performs as intended in various contexts. Testing is an important element of development, especially when working with external APIs, because it helps detect mistakes early on and improves the overall stability of the product.

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

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

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

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

Exploring Asynchronous JavaScript Functions for API Requests

Handling asynchronous requests is crucial when working with APIs in JavaScript. The Fetch API and XMLHttpRequest are the two basic ways for making these requests. The purpose of asynchronous functions is to prevent the browser or server from freezing while waiting for a response, hence improving user experience and performance. Understanding asynchronous behavior enables developers to build more responsive applications that can retrieve data from APIs in real time without affecting the main thread.

Handling asynchronous requests requires managing responses and various mistakes that may arise during the process. For example, one common difficulty when retrieving data from external APIs is returning an undefined value, as demonstrated by the error in the initial case. When developers fail to manage exceptions effectively, their application may crash or produce inaccurate results. Effective error handling, such as try/catch blocks or response status checks, is crucial.

In addition to error handling, security is an important consideration when interacting with external APIs. Exposing sensitive data or granting direct access to APIs without validation can result in vulnerabilities. One solution is to implement server-side requests, in which API calls are done from a backend server, providing an additional degree of security. This prohibits malicious actors from interfering with front-end requests or directly obtaining sensitive data via the browser. Securing these API connections is critical, especially when dealing with financial information like bitcoin rates.