DEV Community: Rodrigo Castilho

Fetch API — Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle

Rodrigo Castilho — Mon, 15 May 2023 09:14:04 +0000

Before this article, I mentioned that I would start the articles series and already created an Introduction, V8 JavaScript engine, Callbacks, AJAX and XMLHttpRequest, Synchronous and Asynchronous, Promises, and Async/Await. If you lost what I did, check it:

Introduction — Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle
V8 JavaScript engine — Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle
Callbacks — Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle
AJAX and XMLHttpRequest — Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle
Synchronous and Asynchronous — Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle
Promises — Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle
Async/Await — Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle

The Fetch API is a replacement for the older XMLHttpRequest (XHR) API, which is more complex to use and has some limitations, is simpler and more intuitive to use, and supports a wider range of data formats. Based on promises, which makes it easy to write asynchronous code that’s easy to read and understand. Promises allow developers to handle responses in a more elegant and efficient way compared to traditional callbacks.

With the Fetch API, you can initiate requests to retrieve data such as JSON, XML, HTML, or binary content like images or audio files.

One of the key benefits of the Fetch API is its use of promises, then when you make a request using the Fetch API, it returns a promise that resolves to the server’s response and this allows you to use the promise’s .then() method to handle the successful response and the .catch() method to handle any errors that may occur and also async/await syntax provides a more concise and synchronous-looking way to handle promises.

Both approaches promises with .then()/.catch() and async/await, are valid ways to handle asynchronous requests with the Fetch API. async/await can often result in more readable and concise code, especially when multiple asynchronous operations need to be chained together.

The fetch() function

It is used to initiate an HTTP request and returns a Promise that resolves to the response object representing the response to that request.

The fetch() function returns a promise that resolves the response from the server, and the response contains information such as status, headers, and actual data.

Request

The first parameter of the fetch() function is “required” and it should be either a URL string or a Request object.

The second parameter of the fetch() function is the “optional” *options *parameter that can be customized.

Some commonly used options include:

method: Specifies the HTTP method for the request (e.g., GET, POST, PUT, DELETE).

Here’s an example of using fetch() with different HTTP methods:

GET: The GET method is used to retrieve data from a server.
POST: The POST method is used to submit data to the server to create a new resource.
PUT: The PUT method is used to update an existing resource on the server.
DELETE: The DELETE method is used to delete a resource on the server.
PATCH: The PATCH method is used to partially update an existing resource on the server.
OPTIONS: The OPTIONS method is used to retrieve the supported methods and other information about a resource from the server.
HEAD: The HEAD method is similar to the GET method, but it retrieves only the response headers and not the response body.

headers: Allows you to set custom headers for the request, such as Content-Type or Authorization.

body: Represents the request body for methods like POST or PUT. It can be a FormData object, a plain text string, or a JSON object.

mode: Controls the request’s CORS (Cross-Origin Resource Sharing) behavior.

cache: Specifies how the browser handles caching of the response.

signal: An AbortSignal object instance; allows you to communicate with a fetch request and abort it if desired via an AbortController.

Sending Cookies and Authentication

By default, the Fetch API does not send cookies or include authentication information. To include cookies or authentication headers, you need to set the credentials option to include. This allows you to make authenticated requests or maintain session-based authentication.

Cross-Origin Requests and CORS

CORS is a security mechanism that restricts which resources a web page can request from a different domain. You need to ensure that the server supports CORS and includes the appropriate headers (e.g., Access-Control-Allow-Origin) to allow your origin to access the resource.

Response

Once you receive the response, you can process it in various ways. Common methods available on the response object include:

response.json(): Parses the response body as JSON and returns a promise that resolves to a JavaScript object.

response.text(): Returns a promise that resolves to the response body as plain text.

response.blob(): Returns a promise that resolves to a Blob object representing the response body.

*response.arrayBuffer(): *Returns a promise that resolves to an ArrayBuffer representing the response body.

You can chain these methods together to handle the response in the desired format.

Request/Response

By default, the fetch() method uses the GET method and does not include a request body. If you need to use another HTTP method or include data with the request, you’ll need to provide those details in the options object.

In the examples below, I’m using the POST method the JSONPlaceholder which is a free API whenever you need some fake data for testing and prototyping.

Important: resource will not be really updated on the server but it will be faked as if.

Using options object parameter directly:

    // Configurations for the request options directly.
    fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        title: "foo",
        body: "bar",
        userId: 1,
      }),
    })
      .then((response) => response.json())
      .then((result) => console.log(result))
      .catch((error) => console.error(error));

Separating Headers and Body:

    // JSON object is created to define the headers.
    const headers = {
      "Content-Type": "application/json",
    };

    // JSON object and converting it to a string of body.
    const body = JSON.stringify({
      title: "foo",
      body: "bar",
      userId: 1,
    });

    const requestOptions = {
      method: "POST",
      headers,
      body,
    };

    fetch("https://jsonplaceholder.typicode.com/posts", requestOptions)
      .then((response) => response.json())
      .then((result) => console.log(result))
      .catch((error) => console.log("error", error));

Separating Headers (using Headers() constructor) and Body:

    // headers object is created using the new Headers() constructor.
    const headers = new Headers();
    headers.append("Content-Type", "application/json");

    // JSON object and converting it to a string of body.
    const body = JSON.stringify({
      title: "foo",
      body: "bar",
      userId: 1,
    });

    const requestOptions = {
      method: "POST",
      headers,
      body,
    };

    fetch("https://jsonplaceholder.typicode.com/posts", requestOptions)
      .then((response) => response.json())
      .then((result) => console.log(result))
      .catch((error) => console.log("error", error));

Separating Body (using FormData() constructor):

    // body object is created using the new FormData() constructor.
    const body = new FormData();
    body.append("title", "foo");
    body.append("body", "bar");
    body.append("userId", 1);

    const requestOptions = {
      method: "POST",
      body,
    };

    fetch("https://jsonplaceholder.typicode.com/posts", requestOptions)
      .then((response) => response.json())
      .then((result) => console.log(result))
      .catch((error) => console.log("error", error));

If you need to upload files, use the FormData object to construct the request body.

Separating Method, Headers, and Body (using Request() constructor):

    // request object is created using the new Request() constructor.
    const request = new Request("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        title: "foo",
        body: "bar",
        userId: 1,
      }),
    });

    fetch(request)
      .then((response) => response.json())
      .then((result) => console.log(result))
      .catch((error) => console.error(error));

Setting Timeouts (using AbortController() constructor):

    const controller = new AbortController();
    const timeout = setTimeout(() => controller.abort(), 5000);

    fetch("https://jsonplaceholder.typicode.com/posts", {
      signal: controller.signal,
    })
      .then((response) => response.json())
      .then((data) => console.log(data))
      .catch((error) => console.error(error))
      .finally(() => clearTimeout(timeout));

Fetching and parsing HTML content

In addition to Fetch API, you can also fetch HTML content and parse it using DOMParser() constructor manipulation techniques.

    fetch("https://rodrigocastilho.com/")
      .then((response) => response.text())
      .then((html) => {
        // DOMParser object is created using the DOMParser() constructor.
        const parser = new DOMParser();

        const doc = parser.parseFromString(html, "text/html");

        // Use DOM manipulation to extract information from the HTML
        const title = doc.querySelector("title").textContent;

        console.log(title); // Output: Rodrigo Castilho (RODCAST)
      })
      .catch((error) => console.error(error));

Pay attention to performance considerations when working with fetch. Optimize your requests by reducing unnecessary headers, minimizing payload size, utilizing HTTP caching, and implementing proper caching strategies on the client and server side.

While the Fetch API is a powerful and flexible tool, it may not be suitable for all use cases. For more complex scenarios such as handling file uploads, WebSocket connections, or server-sent events, developers may need to use other technologies or libraries.

Thank you for reading, I hope this article can somehow have increased your knowledge base about it.

Async/Await — Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle

Rodrigo Castilho — Mon, 08 May 2023 09:28:30 +0000

Before this article, I mentioned to you that I would start the articles series and I already created an Introduction, V8 JavaScript engine, Callbacks, AJAX and XMLHttpRequest, Synchronous and Asynchronous, and about the Promises. If you lost what I did, check it:

In this article, I’ll not explain the concept of Fetch API but don’t worry that I’ll explain it in the next article.

The async and await is a way to write asynchronous JavaScript code that is more readable and easier to reason about, and it provides a more straightforward and less error-prone way of dealing with promises than traditional promise chains.

The async keyword is used to define a function that returns a promise. This allows you to use the await keyword inside the function to wait for asynchronous operations to complete.

The await keyword can only be used inside a function marked as async (async function). When you use await outside of an async function, you’ll get a syntax error.

There are some ways to declare (define) JavaScript functions using async:



    // function declaration
    async function foo() {
      return "Lorem";
    }

    // function expression
    const = async function foo() {
      return "Lorem";
    }

    // arrow function
    const foo = async () => {
      return "Lorem";
    };

    // arrow function (shorthand)
    const foo = async () => "Lorem";

    // Immediately Invoked Function Expression (IIFE) 
    (async () => {
      return "Lorem";
    })();

Following async/await can make your code more readable in many cases. By using async/await, you can write asynchronous code that looks more like synchronous code, which can make it easier to understand and follow the logic of your code, without having to use complex and confusing callbacks or promises.

async/await and Fetch API

Together, async/await and the Fetch API both provide a powerful, efficient, and easy understand.

Async/await works by allowing developers to define functions as async and then use the await keyword to wait for the result of a promise to resolve.

Fetch API is designed to work with asynchronous operations, which allows making requests to an API or server without blocking the main thread of the application and always fetch() method returns a Promise.

By default, the fetch() method uses the GET method, then all the examples will use it.

Obviously, you can use Promises with the .then() and .catch() methods to handle the asynchronous response from the API:



    fetch("https://api.chucknorris.io/jokes/random")
      .then((response) => response.json())
      .then((data) => {
        // Request was successful
        console.log(data);
      })
      .catch((error) => {
        // If an error occurs, see the error in the console.
        console.error(error);
      });

But when you use async/await is often considered a cleaner and more readable approach because it avoids nested callbacks and provides a more linear and readable code flow. The try/catch block is used to handle any errors that may occur during the API request or parsing of the response, which is similar to the .catch() method in the first example. However, it provides a more elegant way to handle errors, as any errors that occur during the try block will be caught in the catch block.

It is not obligatory to use async always in JavaScript, nor is it required to use try/catch in every situation. The choice between async and try/catch depends on the specific requirements and context of your code.



    try {
      const response = await fetch("https://api.chucknorris.io/jokes/random");
      const data = await response.json();

      // Request was successful
      console.log(data);
    } catch (error) {
      // If an error occurs, see the error in the console
      console.error(error);
    }

Of course, readability is subjective and depends on the context of your code. However, in general, async/await can make your asynchronous code more readable and easier to understand, especially when working with complex or nested asynchronous operations.

If you want to fetch multiple API requests in parallel, you can use Promise combinators.

In the example below, I’m using Promise.all method to GET the JSONPlaceholder which is a free API whenever you need some fake data for testing and prototyping:



    // Create an array with 5 different todo url items.
    const todoList = Array.from({ length: 5 }).map(
      (_, number) => `https://jsonplaceholder.typicode.com/todos/${++number}`
    );

    // Fetch the 5 different todo items using Promise.all method and
    // return an array of responses and data.
    const fetchTodoList = async (urls) => {
      try {
        const responseList = await Promise.all(urls.map((url) => fetch(url)));
        const dataList = await Promise.all(
          responseList.map((response) => response.json())
        );
        console.log(dataList); // Output: array with 5 different todo object items.
      } catch (error) {
        console.error(error);
      }
    };

    // Create an array with 5 different todo object items.
    fetchTodoList(todoList);

There’s one another good example using the async/await to get the categories list and category detail now using the Chuck Norris Jokes API:



    const getCategories = async () => {
      const response = await fetch("https://api.chucknorris.io/jokes/categories");
      const data = await response.json();
      return data;
    };

    const getCategory = async (category) => {
      const response = await fetch(
        `https://api.chucknorris.io/jokes/random?category=${category}`
      );
      const data = await response.json();
      return data;
    };

    const getCategoriesItems = async () => {
      const categories = await getCategories();

      for (const category of categories) {
        await getCategory(category);
      }
    };

In summary, if you're dealing with asynchronous operations, using async/await along with try/catch can provide a powerful error handling mechanism. However, if you're working with synchronous code or don't need to pause the execution of code, try/catch alone can handle errors effectively. The choice between async/await and try/catch depends on the nature of your code and the requirements of error handling.

The combination of async/await and the Fetch API simplifies the process of handling HTTP requests and responses. With Fetch API, developers don’t have to deal with complex XHR objects or callbacks. The syntax for making a fetch request is straightforward, and it’s easy to extract the data from the response object.

async/await can simplify asynchronous programming in JavaScript, but it can also introduce additional complexity and potential issues. Always you need to be mindful of these potential issues and have a solid understanding of asynchronous programming, error handling, state management, performance considerations, and debugging when using async/await.

So, If you want to know more about Fetch API, please wait for the next article that I’ll publish.

Thank you for reading, I hope this article can somehow have increased your knowledge base about it.

Promises — Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle

Rodrigo Castilho — Mon, 01 May 2023 09:17:44 +0000

Before this article, I mentioned to you that I would start the articles series and I already created an Introduction, V8 JavaScript engine, Callbacks, AJAX and XMLHttpRequest, and about the Synchronous and Asynchronous. If you lost what I did, check it:

In this article, I’ll not explain the concept of Fetch API or Async/Await but don’t worry that I’ll explain it in the next article.

Promises are a way to handle asynchronous operations. Promises represent a value that may not be available yet but will be resolved at some point in the future. They provide a way to write asynchronous code that is easier to reason about and less prone to error.

A promise represents a future value that may be available now or later or may never be available at all.

A promise has three possible states:

Pending: The initial state, before the Promise is resolved or rejected.
Fulfilled: The Promise has been resolved with a value.
Rejected: The Promise has been rejected for a reason.

Promises can be created using the Promise constructor, which takes a function with two arguments: a resolve function and a reject function.

The resolve function is used to fulfill the promise with a value. If you have a successful result from your asynchronous operation, you pass that value to the resolve function.

The reject function is used to reject the promise with an error value. If you encounter an error during your asynchronous operation, you can pass the error value to the reject function.

Once a promise is created, you can use its then method to handle the *fulfilled *state and its catch method to handle the *rejected *state. You can also use the *finally *method to handle both states.

How to make a Promise in JavaScript?

There are different types to create a Promise.

Promise object that is created using the Promise constructor.

    // Created using the Promise Constructor
    const promise0 = new Promise((resolve, reject) => {
      // When the operation is complete, call either `resolve` or `reject`
    });

Promise object that is created using the Promise constructor, *new *keyword, and *resolve *function:

    const promise1 = new Promise((resolve, reject) => {
      resolve("Resolved!");
    });

    promise1.then((result) => {
      console.log(result); // Output: Resolved!
    });

Promise object that is created using the Promise constructor, without *new *keyword (which is a shorthand way), and *resolve *function:

    const promise2 = Promise.resolve("Resolved!");

    promise2.then((result) => {
      console.log(result); // Output: Resolved!
    });

Also, you can use *reject *function and the *catch *method:

    const promise2 = Promise.reject("Rejected!");

    promise2
      .then((result) => {
        console.log(result);
      })
      .catch((error) => {
        // Output: Promise rejected with error: Rejected!
        console.error(`Promise rejected with error: ${error}`);
      });

Promise object that is created using the Promise constructor, new keyword, resolve *and *reject functions, as well as the then, catch, and *finally *methods:

    const promise3 = new Promise((resolve, reject) => {
      // Create a random number between 1 and 5
      const randomNumber = Math.floor(Math.random() * 5 + 1);

      if (randomNumber >= 2) {
        resolve(randomNumber);
      } else {
        reject(new Error("Random number is less than 2"));
      }
    });

    promise3
      .then((result) => {
        // If the random number is between 1 and 2, output:
        // Promise resolved with result: `result` (result is the random number)
        console.log(`Promise resolved with result: ${result}`);
      })
      .catch((error) => {
        // If the random number is between 3 and 5, output:
        // Promise rejected with error: Random number is less than 2
        console.error(`Promise rejected with error: ${error.message}`);
      })
      .finally(() => {
        // Always after resolve or reject, output:
        // Promise completed
        console.log("Promise completed");
      });

Also, you can use a try-catch block to handle any errors that may occur during the execution of the Promise executor function. If an error occurs, we throw it and catch it in the catch block, where we reject the Promise with the error.

    const promise3 = new Promise((resolve, reject) => {
      try {
        // Create a random number between 1 and 5
        const randomNumber = Math.floor(Math.random() * 5 + 1);

        if (randomNumber >= 2) {
          resolve(randomNumber);
        } else {
          throw new Error("Random number is less than 2");
        }
      } catch (error) {
        reject(error);
      }
    });

    promise3
      .then((result) => {
        // If the random number is between 1 and 2, output:
        // Promise resolved with result: `result` (result is the random number)
        console.log(`Promise resolved with result: ${result}`);
      })
      .catch((error) => {
        // If the random number is between 3 and 5, output:
        // Promise rejected with error: Random number is less than 2
        console.error(`Promise rejected with error: ${error.message}`);
      })
      .finally(() => {
        // Always after resolve or reject, output:
        // Promise completed
        console.log("Promise completed");
      });

There’s one good example of using the Promise object is creating a sleep function to add the delay before the data is returned:

    const sleep = (ms) => {
      return new Promise((resolve) => setTimeout(resolve, ms));
    };

    // Delay of 5 seconds (5000 milliseconds) before the data is returned
    sleep(5000).then(() => {
      console.log("Lorem"); // Output: "Lorem"
    });

What is Promise Chaining?

Promise Chaining is a powerful technique in JavaScript that allows us to execute asynchronous operations in a specific order. This technique involves returning a new Promise from a then() callback of an existing Promise, which allows us to chain multiple asynchronous operations together.

    const promise3 = (name) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          return resolve(name);
        }, 1000); // Delayed function after 1 second (1000 milliseconds)
      });
    };

    promise3("Lorem")
      .then((data) => {
        console.log(data); // wait 1 second and output: "Lorem"
        return promise3("Ipsum");
      })
      .then((data) => {
        console.log(data); // wait 1 second and output: "Ipsum"
        return promise3("Dolor");
      })
      .then((data) => {
        console.log(data); // wait 1 second and output: "Dolor"
        return promise3("Amet");
      })
      .then((data) => {
        console.log(data); // wait 1 second and output: "Amet"
      });

Async/await is a more readable and concise way of working with Promises than chaining Promises, especially when dealing with complex logic that involves multiple asynchronous operations, and I’ll explain it in the next article.

What are and which are Promise combinators?

Promise combinators are higher-order functions that operate on multiple Promises and return a new Promise that depends on the outcome of the input Promises, and one powerful technique using Promises is the ability to execute multiple asynchronous operations in parallel. This technique can improve performance and reduce the overall time it takes to complete multiple asynchronous operations.

Below are the Promise combinators available in JavaScript:

Promise.all(): Returns a new Promise that resolves with an array of the results of all input Promises, in the same order as they were passed in. If any of the input Promises are rejected, the returned Promise is also *rejected *with the reason for the first *rejected *Promise.

    Promise.all([promise1, promise2, promise3])
      .then((results) => {
        console.log("All Promises resolved:", results);
      })
      .catch((error) => {
        console.error("One or more Promises rejected:", error);
      });

Promise.race(): Returns a new Promise that is settled with the result of the first input Promise to settle, either resolved *or *rejected.

    Promise.race([promise1, promise2, promise3])
      .then((result) => {
        console.log("The first Promise settled:", result);
      })
      .catch((error) => {
        console.error("One or more Promises rejected:", error);
      });

Promise.any(): Returns a new Promise that resolves with the value of the first input Promise to resolve. If all input Promises are rejected, the returned Promise is also *rejected *with an *AggregateError *that contains an array of the rejection reasons.

    Promise.any([promise1, promise2, promise3])
      .then((result) => {
        console.log("The first Promise resolved:", result);
      })
      .catch((error) => {
        console.error("All Promises rejected:", error);
      });

Promise.allSettled(): Returns a new Promise that resolves with an array of objects representing the outcomes of all input Promises, whether they were resolved or rejected. Each object has a status property that is either fulfilled *or *rejected, and a value or reason property that contains the resolved value or rejection reason, respectively.

    Promise.allSettled([promise1, promise2, promise3])
      .then((results) => {
        console.log("All Promises settled:", results);
      })
      .catch((error) => {
        console.error("One or more Promises rejected:", error);
      });

Never forget: any promise, you can use finally method which will be executed after executing promise.

Which are the difference between them?

The key differences between these methods are in the way they handle multiple Promises, and in the values that they resolve or reject.

Promise.all() and Promise.race() are focused on resolving or rejecting with a single value, while Promise.any() and Promise.allSettled() are focused on aggregating the outcomes of multiple Promises. Additionally, Promise.any() and Promise.allSettled() return a Promise that always resolves, while Promise.all() and Promise.race() can result in a rejected Promise.

What powerful technique when need to cancel?

Cancellation in JavaScript Promises refers to the ability to abort a Promise chain before it completes. Cancellation can be useful for optimizing performance, reducing memory usage, and improving user experience by allowing users to interrupt long-running operations.

    const controller = new AbortController();
    const signal = controller.signal;

    const promise = new Promise((resolve, reject) => {
      if (signal.aborted) {
        reject(new Error("Promise cancelled"));
      } else if (error) {
        reject(error);
      } else {
        resolve(result);
      }
    });

    // Set a timeout to cancel the Promise after 5 seconds
    setTimeout(() => {
      controller.abort();
    }, 5000);

One powerful technique using the AbortController API is in combination with the Fetch API for making HTTP requests but don’t worry that I’ll explain it in the next article.

So, If you want to know more about async/await, please wait for the next article that I'll publish.

Thank you for reading, I hope this article can somehow have increased your knowledge base about it.

Synchronous and Asynchronous — Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle

Rodrigo Castilho — Mon, 24 Apr 2023 09:15:14 +0000

Before this article, I mentioned to you that I would start the articles series and I created an Introduction, V8 JavaScript engine, Callbacks, and about the AJAX and XMLHttpRequest. If you lost what I did, check it:

In this article series, I’ll not explain the concept of Fetch API or Promises but don’t worry that I’ll explain it in the next article.

Never Forget: JavaScript is a single-threaded and interpreted language, not a compiled one.

The browser reads a script containing JavaScript code from top-to-bottom in sequential order and blocks long-running tasks such as network requests and I/O events.

Basically, synchronous code is executed sequentially, one line of code at a time, and the next line of code cannot be executed until the previous one has finished executing. On the other hand, asynchronous code allows for multiple lines of code to be executed simultaneously, without having to wait for the previous line to finish executing.

What are the differences between synchronous and asynchronous?

Synchronous code execution is straightforward to reason about, as it follows a linear execution pattern. However, it can lead to performance issues when dealing with long-running tasks, as it can cause the browser to freeze and become unresponsive. In contrast, asynchronous code execution can be more complex, as it requires handling callbacks, promises, or async/await functions. However, it allows for non-blocking operations, which means that the browser can continue to run other code while waiting for a response from an asynchronous operation.

What are the types of synchronous in JavaScript?

Synchronous functions: A synchronous function will execute its code sequentially, blocking the execution of other code until it has been completed. These types of functions are commonly used for operations that can be completed quickly, such as simple calculations or data manipulations. See the example below using this feature:

    function add(x, y) {
      return x + y;
    }

    console.log(add(10, 2)); // Output: 12

Synchronous loops: Loops in JavaScript are typically synchronous, which means that the loop will block the execution of other code until it has been completed. However, some loop constructs, such as the for…of loop, can be used with asynchronous operations using the await keyword. See the example below using this feature:

    const vowels = ["a", "e", "i", "o", "u"];

    for (const vowel of vowels) {
      console.log(vowel);
    }

    /**
      Output:
      a
      e
      i
      o
      u
    */

Synchronous operations with the DOM: Some operations that involve manipulating the DOM (Document Object Model) are synchronous, such as setting the text content of an element or getting the size of an element. See the example below using this feature:

    const element = document.getElementById("element-id");
    element.textContent = "Hello world!";

What are the types of asynchronous in JavaScript?

setTimeout(): This method is used to delay the execution of a function for a specified amount of time (in milliseconds). It is often used to simulate a delay or to schedule a function to run in the future. See the example below using this feature:

    setTimeout(() => {
      console.log("Delayed function after 1 second (1000 milliseconds)");
    }, 1000);

setInterval(): This method is used to repeatedly execute a function at a specified interval (in milliseconds). It is often used to create animations or to periodically update data on a webpage. See the example below using this feature:

    setInterval(() => {
      console.log("Repeated function after 1 second (1000 milliseconds)");
    }, 1000);

Event listeners: Event listeners are used to listening for and responding to events that occur on a web page, such as a button click or a page load. They allow for asynchronous handling of user interactions and can be used to create interactive and dynamic web applications. See the example below using this feature:

    const element = document.getElementById("element-id");
    element.addEventListener("click", () => {
      console.log("element-id clicked");
    });

Promises: Promises are a way to handle asynchronous operations in a more readable and manageable way. They allow you to define a chain of actions that should be executed when an asynchronous operation succeeds or fails. See the example below using this feature:

    const delay = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("Promise resolved");
      }, 1000);
    });

    delay
      .then((result) => {
        console.log(result); // Output: Promise resolved
      })
      .catch((error) => {
        console.error(error); // Output: error value
      });

Where happens synchronous and asynchronous in the V8 engine?

Synchronous and asynchronous operations are executed in different parts of the engine.

Synchronous operations in JavaScript are executed on the main thread of the V8 engine, which is responsible for executing JavaScript code in a single-threaded. When a synchronous operation is executed, the V8 engine blocks the main thread until the operation is completed. This can lead to performance issues if the operation takes a long time to complete, as it will block other JavaScript code from running on the main thread.

Asynchronous operations in JavaScript are executed on a separate thread, outside of the main thread of the V8 engine. When an asynchronous operation is initiated, such as making an HTTP request or reading a file from Drive, the main thread continues to execute other JavaScript code while the asynchronous operation runs in the background. Once the operation is completed, a callback function is executed on the main thread to handle the result of the operation.

Which one should I use?

The choice between synchronous and asynchronous programming ultimately depends on the specific requirements and constraints of the task at hand. However, the choice between synchronous and asynchronous programming ultimately depends on the specific requirements and constraints of the task at hand, and both approaches have their strengths and weaknesses.

In some cases, a combination of both synchronous and asynchronous programming may be necessary to achieve the desired outcome. In general, however, asynchronous requests should be preferred to synchronous requests for performance reasons.

So, If you want to know more about promises, and async/await, please wait for the next article that I’ll publish.

Thank you for reading, I hope this article can somehow have increased your knowledge base about it.

AJAX and XMLHttpRequest — Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle

Rodrigo Castilho — Mon, 17 Apr 2023 09:11:36 +0000

Before this article, I mentioned to you that I would start the articles series and I created an Introduction, V8 JavaScript engine, and about the Callbacks. If you lost what I did, check it:

In this article series, I’ll not explain the concept of Fetch API or Promises but don’t worry that I’ll explain it in the next article.

AJAX and XMLHttpRequest are important for older Frontend Engineers because they enable the creation of dynamic, interactive web applications that can fetch data from servers without requiring a full page refresh. Prior to the advent of AJAX and XMLHttpRequest, web developers had to rely on clunky and inefficient techniques like iframe-based solutions or full page reloads to update content on web pages and you can create web applications that are more responsive and user-friendly. They can update content on web pages without interrupting the user’s experience or requiring them to wait for a page to reload. Additionally, AJAX and XMLHttpRequest can be used to fetch data in the background, allowing developers to create real-time applications that update automatically as new data becomes available.

What is AJAX?

AJAX is a technique that allows you to update parts of a page dynamically without interrupting the user’s interaction. It’s commonly used in web applications to provide a smoother user experience by making it possible to fetch and display data without requiring a full page refresh. With AJAX, you can make asynchronous requests to a server using JavaScript, and then update the page with the response data. This can be done without interrupting the user’s interaction, allowing them to continue using the page while the request is being processed.

What is XMLHttpRequest?

The XMLHttpRequest (XHR) object is a built-in JavaScript object that provides an easy way to make requests to a server and receive responses. It’s the core technology behind AJAX and is used to fetch data from a server without requiring a page refresh. To use the XMLHttpRequest object, you first need to create an instance of it using the new XMLHttpRequest() constructor. Then, you can use the open() method to specify the request method, URL, and any data to send. Finally, you can use the send() method to send the request to the server.

Making a Request with XMLHttpRequest

In the example below, how to use the XMLHttpRequest object to make a GET request to the Chuck Norris API and handle the response, we’re requesting the Chuck Norris Jokes API to get a random joke.

    // Create an XMLHttpRequest object
    const xhr = new XMLHttpRequest();

    // Set the URL and HTTP method for the request
    xhr.open('GET', 'https://api.chucknorris.io/jokes/random');

    // Define a callback function to handle the response
    xhr.onload = function() {
      if (xhr.status === 200) {
        // Request was successful
        console.log(xhr.responseText);
      } else {
        // Request failed
        console.log(`HTTP error! status: ${xhr.status}`);
      }
    };

    // Define a callback function to handle any errors
    xhr.onerror = function () {
      console.log("Network error");
    };

    // Send the request to the server
    xhr.send();

Also, you can use the readystatechange **event instead of **onload, and we’re checking the **readyState **of the XMLHttpRequest object to make sure that the request has been completed. See the example below.

    // Create an XMLHttpRequest object
    const xhr = new XMLHttpRequest();

    // Define the onreadystatechange event to handle the state change of the request
    xhr.onreadystatechange = function () {
      // Check if the readyState is 4, which means the request has completed
      if (this.readyState === 4) {
        // Check if the status code is 200, which means the request was successful
        if (this.status === 200) {
          // Request was successful
          console.log(xhr.responseText);
        } else {
          // Log an error message to the console if the request was not successful
          console.log(`HTTP error! status: ${xhr.status}`);
        }
      }
    };

    // Define a callback function to handle any errors
    xhr.onerror = function () {
      console.log("Network error");
    };

    // Send the request to the server
    xhr.send();

Using Callbacks with XMLHttpRequest

When using XMLHttpRequest in JavaScript, it’s common to use callbacks to handle the response from the server. Callbacks are functions that are passed as arguments to another function and are executed when the function completes its task.

In the example below, I used the same code block above (first example) and added the callback function.

    function createRequest(url, callback) {
      // Create an XMLHttpRequest object
      const xhr = new XMLHttpRequest();

      // Set the URL and HTTP method for the request
      xhr.open("GET", url);

      // Define a callback function to handle the response
      xhr.onload = function () {
        if (xhr.status === 200) {
          // Request was successful and return the callback function
          callback(xhr.responseText);
        } else {
          // Request failed
          console.log(`HTTP error! status: ${xhr.status}`);
        }
      };

      // Define a callback function to handle any errors
      xhr.onerror = function () {
        console.log("Network error");
      };

      // Send the request to the server
      xhr.send();
    }

    // Call the makeRequest function and pass the parameters URL of the API endpoint we want to fetch and a callback function that logs the response data to the console.
    createRequest("https://api.chucknorris.io/jokes/random", (data) => {
      console.log(data);
    });

XMLHttpRequest and Fetch API

Fetch API has a simpler and more intuitive API compared to XMLHttpRequest, making it easier to use. Fetch API also has built-in support for modern features like Promise-based responses and the ability to cancel requests.

However, XMLHttpRequest has more features and flexibility, including the ability to track progress, set headers, and handle binary data. It also has better support for handling legacy formats like XML and SOAP.

In summary, both AJAX and Fetch API are useful for making asynchronous requests in JavaScript.

Don’t forget preventing Cross-site Scripting (XSS) attacks is a crucial part of web development and should definitely be included as a best practice when using XMLHttpRequest.

However, Fetch API is a newer standard that was introduced in ES6 and provides a simpler and more modern API for making HTTP requests, and Fetch API provides a more modern and streamlined API with better support for modern features like promises and CORS and as commented above I’ll explain it in the next article.

So, If you want to know more about promises, and async/await, please wait for the next article that I’ll publish.

Thank you for reading, I hope this article can somehow have increased your knowledge base about it.

Callbacks — Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle

Rodrigo Castilho — Mon, 10 Apr 2023 09:11:50 +0000

Before this article, I mentioned to you that I would start the articles series and I created an Introduction, and about the V8 JavaScript engine. If you lost what I did, check it:

In this article series, I’ll not explain the concept of Promises or async/await but don’t worry that I’ll explain in the next article.

In summary, A callback is a programming technique in which a function is passed as an argument to another function and is executed at a later time, usually after a task has been completed. This technique is commonly used in asynchronous programming and event-driven programming, and the purpose of a callback is to allow a function to call back or notify the caller when it has completed a task or some operation.

Callbacks are a powerful programming technique in JavaScript that allows for flexible and efficient asynchronous programming. They can be used to handle complex and long-running operations, handle user input or browser events, pass data between functions, and more.

Here’s a simple example of how callback works using a calculator passing a callback function as an argument.

In the example below, the calculator function receives parameters x and y as a number and callback as a function and returns the result of invoking the callback function with x and y as arguments.

    function calculator(x, y, callback) {
      return callback(x, y);
    }

    function add(x, y) {
      return x + y;
    }

    function subtract(x, y) {
      return x - y;
    }

    function multiply(x, y) {
      return x * y;
    }

    function divide(x, y) {
      return x / y;
    }

    console.log(calculator(10, 2, add)); // Output: 12
    console.log(calculator(10, 2, subtract)); // Output: 8
    console.log(calculator(10, 2, multiply)); // Output: 20
    console.log(calculator(10, 2, divide)); // Output: 5

Where I can use callbacks?

Callbacks can be used in a variety of contexts in JavaScript. Here are some common examples:

Asynchronous programming: Callbacks are commonly used to handle asynchronous operations, such as fetching data from a server or reading a file from a disk. When an asynchronous operation completes, the callback is executed to handle the result.

In the example below, the fetch() function is called with a URL argument to send an HTTP request to the specified URL and retrieve data from it. In this case, we’re requesting the Chuck Norris Jokes API to get a random joke.

    fetch("https://api.chucknorris.io/jokes/random")
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
      })
      .then((data) => console.log(data))
      .catch((error) => console.error(`Error: ${error}`))
      .finally(() => console.log("Fetch complete!"));

Event-driven programming: Callbacks are often used to handle events in a web application, such as mouse clicks, keyboard input, or form submissions. When an event occurs, the callback is executed to handle the event.

In the example below, image a button tag in HTML and will add the click action.

    const button = document.querySelector("button");

    function handleClick(event) {
      console.log("Button clicked!");
    }

    button.addEventListener("click", handleClick);

Callback-based APIs: Some JavaScript libraries and frameworks use callbacks as a way to provide a simple and flexible interface for developers to interact with their APIs. For example, the Node.js file system API uses callbacks to provide a simple and flexible way to read and write files on the server.

In the example below, define a function called sayHello that returns the string “Hello World!”. I used the setTimeout function to schedule the sayHello function to be called after a delay of 1000 milliseconds (i.e., 1 second).

    function sayHello() {
      console.log("Hello World!");
    }

    setTimeout(sayHello, 1000);

Modular programming: Callbacks can be used to pass functions between modules in a program, allowing for more flexible and modular code. For example, a module that generates random numbers could use a callback function to allow the caller to specify how the number should be used.

In the example below, define a function called sayMyName that takes a callback function as a parameter. Inside the sayMyName function, we define a variable called name and assign it the value “Rodrigo”. When the sayHello function is called, it logs the message “Hello World Rodrigo!” to the console.

    function sayMyName(callback) {
      const name = "Rodrigo";
      callback(name);
    }

    function sayHello(name) {
      console.log(`Hello World ${name}!`);
    }

    sayMyName(sayHello);

What does Callback Hell mean also known as Pyramid of Doom

Excessive use of callbacks can lead to complex and difficult-to-read code, so it’s important to use them judiciously and consider alternative techniques when appropriate.

To avoid these issues, it is important to use callbacks judiciously and consider alternative techniques when appropriate. Promises and async/await syntax are newer language features in JavaScript that can provide more powerful and flexible alternatives to callbacks.

So, If you want to know more about promises, and async/await, please wait for the next article that I’ll publish.

Thank you for reading, I hope this article can somehow have increased your knowledge base about it.

V8 JavaScript engine — Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle

Rodrigo Castilho — Mon, 03 Apr 2023 09:08:39 +0000

Before this article, I mentioned to you that would start the articles series and create an Introduction. If you lost what I did, check it: Introduction — Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle

There are differences between the JavaScript engine and the Browser engine in this article. In summary, the JavaScript engine executes JavaScript code, while the browser engine renders web pages and coordinates with the JavaScript engine to execute JavaScript code within a web browser.

I’m writing about the V8 JavaScript engine because is the most popular JavaScript engine and in comparison with other JavaScript engines there’s no single fastest JavaScript engine.

When you write JavaScript, you need to have in your mind that your code will be interpreted by a JavaScript engine in the browser such as V8 (Chromium-based browsers) as well as in server-side JavaScript platforms, such as Node.js., SpiderMonkey (Firefox), and others.

It takes the JavaScript code as input, parses it, and generates machine code or bytecode that can be executed by the computer’s processor. JavaScript engines are typically used in web browsers to execute JavaScript code on web pages, but they can also be used outside of the browser context in environments such as Node.js.

Learning what is an event-based platform, what is a thread vs a process, and how it works in practice gives you leverage to build highly scalable apps respecting the platform’s lifecycle.

Here are some details of V8 that developers should know about:

V8 is used in many popular applications: The V8 engine is used in many popular applications, including the Google Chrome browser, Node.js, and the Electron framework.

V8 is Cross-platform compatibility: V8 is designed to work on multiple platforms, including Windows, macOS, and Linux.

V8 supports multiple programming languages: Although V8 is primarily used to execute JavaScript code, it can also be used to execute other languages that can be compiled into machine code, such as TypeScript and Dart.

V8 has support for WebAssembly: V8 has built-in support for WebAssembly, a low-level bytecode format designed for executing code on the web. This support allows developers to run WebAssembly modules alongside JavaScript code in the same application.

Just-in-time compilation: V8 uses a just-in-time (JIT) compilation technique to optimize JavaScript code on-the-fly. This allows V8 to generate highly optimized machine code that can execute JavaScript code much faster than traditional interpreters.

*Memory management: *V8 employs a garbage collector to manage memory in JavaScript applications. The garbage collector automatically frees the memory that is no longer needed, which can help prevent memory leaks and improve application performance.

ECMAScript compatibility: V8 supports the latest ECMAScript (JavaScript) language specifications, including ECMAScript 2021. This means developers can use the latest JavaScript language features in their applications.

Debugging tools: V8 includes a robust set of debugging tools (Chrome DevTools) that allow developers to inspect and debug their JavaScript applications. These tools include a JavaScript debugger, a profiler, and a heap snapshot tool.

*Use the right data structures: *V8 is optimized for certain data structures, such as arrays and objects. When possible, use these data structures instead of custom data structures to improve performance.

Integration with Node.js: V8 is the default JavaScript engine used in Node.js, which is a popular server-side JavaScript runtime environment. This means that developers can use the same JavaScript code on the client and server sides of their applications, and benefit from the same high-performance optimizations provided by V8. If we compare Node.js with other competitors Deno uses V8 too, and Bun uses JavaScriptCore to execute JavaScript code.

How does the V8 JavaScript engine work?

The V8 JavaScript engine follows a sequence of steps to execute JavaScript code. Here’s an overview of the sequence of steps that V8 follows:

*Parsing: *The first step in executing JavaScript code is parsing. The V8 engine takes the JavaScript code as input and parses it into an abstract syntax tree (AST) that represents the structure of the code.

Compilation: Once the code has been parsed, the V8 engine compiles it into bytecode, a low-level representation of the code that can be executed more efficiently than the source code. V8 compiles the bytecode using a technique called Just-In-Time (JIT) compilation, which means that the compilation happens at runtime, just before the code is executed.

*Optimization: *After the code has been compiled, the V8 engine applies several optimization techniques to improve its performance. These optimizations include inlining functions, eliminating unused code, and using feedback from previous runs of the code to improve the generated machine code.

Execution: Finally, the V8 engine executes the compiled and optimized bytecode. During execution, the V8 engine uses a call stack to keep track of function calls and uses a garbage collector to manage memory allocation and deallocation.

Profiling: As the code is executed, the V8 engine collects profiling data that can be used to further optimize the code. This profiling data includes information about which functions are being called frequently and which functions are taking the most time to execute.

If JavaScript is single-threaded, how it works asynchronously?

Which means that it can only execute one task at a time. However, it can achieve asynchronous behavior using various techniques, including callbacks, promises, and async/await.

In all of these techniques, the single thread of execution is used to manage the event loop, which is responsible for queuing and executing asynchronous tasks. When an asynchronous task is started, it is added to the event loop, and when it is complete, the callback function or promise resolution is added to a task queue. The event loop then picks up these tasks and executes them when the thread is idle.

So, If you want to know more about callbacks, promises, and async/await, please wait for the next article that I’ll publish.

Thank you for reading, I hope this article can somehow have increased your knowledge base about it.

Introduction — Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle

Rodrigo Castilho — Mon, 27 Mar 2023 09:25:28 +0000

Before this article, I mentioned to you that would start the articles series. If you lost what I did, check it: Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle

In this article series, I’ll not teach you how to create an API but keep in mind that you need to create or receive an API before data fetching.

We know that data fetching is a crucial aspect of modern web development with the increasing complexity of web applications needing to work with dynamic loading of data from servers to web applications, by making API calls to fetch and save items.

It’s important to note that using client-side data fetching can affect the performance of your application and the load speed of your pages. This is because the data fetching is done at the time of the component or pages mount, and the data is not cached.

Whether we’re building Single Page Applications (SPA), Server Side Rendering (SSR), Static Site Generation (SSG), or Incremental Static Regeneration (ISR), we need to retrieve data from various sources to provide a seamless user experience, and in the data fetching lifecycle, API requests are made to remote servers to retrieve data. There are several types of API requests, including GET, POST, PUT, DELETE, and PATCH. GET requests are used to retrieve data, while POST requests are used to submit new data to a server. PUT, DELETE, and PATCH requests are used to modify, delete, or update existing data on the server, and API responses contain the data requested by an API request. The data is typically returned in the form of JSON (JavaScript Object Notation), a lightweight data format that is easy to read and write. Once the response is received, the data can be parsed and displayed on a web page or used for further processing.

We’ll start by discussing the V8 JavaScript engine, responsible for executing our code in the browser. Understanding how V8 works is essential when dealing with asynchronous operations, which are commonly used in data fetching. We’ll then move on to Callbacks, AJAX, and XMLHttpRequest, which are some of the earliest techniques used to fetch data in JavaScript. We’ll explore their advantages and disadvantages and discuss when to use them.

Next, we’ll dive into the differences between Synchronous and Asynchronous code execution and explore how to use Asynchronous code to fetch data. We’ll examine Promises, one of the most popular ways to handle asynchronous operations in JavaScript, and we’ll discuss their advantages and disadvantages. We’ll also cover Async/Await, a more recent addition to the language that simplifies the syntax of Promises.

Finally, we’ll discuss the Fetch API, a modern way to fetch data in JavaScript that provides a simpler and more flexible interface than XMLHttpRequest. We’ll explore its capabilities and limitations and discuss best practices for using it in real-world applications.

Throughout this article series, we’ll provide examples and code snippets that illustrate the concepts we discuss. We’ll also share tips and tricks to help you optimize your data-fetching code and avoid common pitfalls. Whether you’re a Frontend engineer looking to deepen your understanding of data fetching or a seasoned Frontend engineer who wants to improve their skills, this article series has something for you.

Whether a beginner or an experienced Frontend engineer, this article series will provide valuable insights and practical tips to enhance your data fetching skills.

Thank you for reading, I hope this article can somehow have increased your knowledge base about it.

Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle

Rodrigo Castilho — Mon, 20 Mar 2023 19:21:42 +0000

Beginning today, I’ll start an article series about JavaScript API Requests and Responses in the Data Fetching lifecycle.

In this article series, I’ll cover a range of topics, including the Introduction, V8 JavaScript Engine, Callbacks, AJAX/XMLHttpRequest, Synchronous/Asynchronous, Promises, Async/Await, Fetch API, and Conclusion. I’ll explain the advantages and disadvantages of each technique, provide examples and code snippets, and share best practices for building efficient and scalable applications.

I’m excited to share my knowledge with you and help you level up your skills.

So, whether you’re a seasoned JavaScript developer or just starting out, this article series is for you. Follow along to learn everything you need to know about data fetching in JavaScript and start building better applications today.

Stay tuned for the first article in the series, where we’ll dive into the Introduction for the theme.

Thank you for reading, I hope this article can somehow have increased your knowledge base about it.