callback h311

callbackVsPromise.js

/**
 *
 * Callback vs Promise demo
 *
 */

// A callback is nothing more than a parameter.
// Instead of accepting a string or object (or int, etc..), we accept
// a function instead.

// Callback hell is mostly due to async programming.

const axios = require("axios").default;

/**
 * @function dataFetcher 
 *  - Sends a GET request to the URL you choose.
 *  - We pass the data (if no error), and any errors (if any) to the callback function.
 * @param {String} url the url to send a GET request to. 
 * @param {Function} callback function that is called once data is received.
 * 
 * @notes
 * You could use `node-fetch` or something like it in place of `axios` if you wanted to.
 */
function dataFetcher(url, callback) {
  axios
    .get(url)
    .then((response) => response.data)
    // Notice how we pass the data we got from the API as the "data" param,
    // and we pass "null" as the errors param. This is so the caller can handle
    // errors.
    .then((data) => callback(data, null)) 
    // Same thing here, just the opposite.
    .catch((error) => callback(null, error));
}

// dataFetcher function in use.
dataFetcher("https://jsonplaceholder.typicode.com/todos/1", function (data, error) {
  if (error) throw error;
  console.log("from dataFetcher :", data);
  //// Now imagine if you had to send like 10 requests to piece together data.
  //// This would get ugly quick.
  /*
  dataFetcher("...", function(data2, error2) {
    if (error2) throw error2;
    dataFetcher("...", function(data3, error3) {
      if (error3) throw error3;
      dataFetcher("...", function(data2, error2) {
        // you get the idea...
      })
    })
  })
  */
});

// Now instead of asking for a callback function, we can simply just return a Promise.
// The Promise is passed through from axios.
function dataFetcherAsync(url) {
  return axios.get(url);
}

// dataFetcherAsync in use.
// Since we want to use async/await, we have to wrap our call to `dataFetcherAsync` in a function. 
// Why? ** ** Node does not support "top-level" async. ** **
// This looks fancy but it's called an immediately invoked function expression.
(async function() {
  // Since we don't have an error passed to use in a callback,
  // we have to catch any errors that may occur.
  try {
    const response = await dataFetcherAsync("https://jsonplaceholder.typicode.com/todos/1");
    console.log("from dataFetcherAsync :", response.data);
    //// Now imagine if you had to send like 10 requests to piece together data.
    //// It would look much cleaner...
    /*
    const anotherResponse = await dataFetcherAsync("....");
    */
  } catch (error) {
    throw error;
  }
})();