Fetch API Fun: Beginner's Guide to Web Requests 🔎🌐
Tags: webdev, javascript, api, beginners
Published: 2024-04-06 16:44:36

Interacting with external APIs, or Application Programming Interfaces, has become an **essential skill** in web development.

Learn the essentials of Fetch API with this and continue your learning journey with resource links at the end of the article.

In programming, **when we want to get information from other places on the internet, we use something called an API**.

One tool we use to talk to APIs in JavaScript is called the **_Fetch API_**.

Today, we're going to learn all about the Fetch API, and how it works, and I'll show you a fun example so you can try it out yourself.

***

## 1️⃣ What is Fetch API? + Usage

The Fetch API is a **JavaScript interface** _for making network requests_, **including fetching data from a server or sending data to a server using HTTP**.

The Fetch API is a **Modern**, **promise-based** JavaScript API for making _network requests_ in web applications.

It was introduced to replace the older and less flexible XMLHttpRequest object, which is commonly associated with AJAX.

The Fetch API is also simple to use. 

You create a fetch() function that takes a URL as an argument and returns a Promise.

You can then use .then() and .catch() methods to handle the response and any errors.

***

## 2️⃣ Key Concepts

**➡️ Requests and Responses**

The Fetch API involves sending **requests 
(e.g., GET, POST, PUT, DELETE)** to a URL and receive responses from the server.

**➡️ Promises**

Fetch API uses JavaScript Promises to handle asynchronous operations, making it more efficient and easier to work with.

**➡️ CORS**

Cross-Origin Resource Sharing (CORS) is an important consideration when making requests to different domains.

Fetch handles CORS by default.

Learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

**➡️ Request Options**

You can configure the request by providing various options in the fetch() function, such as **method, headers, and body for POST requests**.

**➡️ Handling Responses**

The .then() method is used to handle the response.

You can use methods like **.json(), .text(), or .blob()** to parse the response based on the expected content type.

***

## 3️⃣ More Stuff

**➡️ Error Handling**

The **.catch()** method is used to handle errors during the request.

**➡️ Headers**

You can set headers in the request to provide additional information, like **authentication tokens or content type**.

**➡️ Async/Await**

You can also use **async/await** with Fetch for more concise and readable code.

**➡️ Authentication**

You can include authentication tokens or credentials when making requests to secure endpoints.

**➡️ Cross-Origin Requests**

Fetch handles Cross-Origin requests well, and you can use options like mode and credentials to control CORS behaviour.

***

## 4️⃣ Code Example

```js
fetch("https://official-joke-api.appspot.com/random_joke")
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then((data) => {
    console.log("Joke:", data.setup);
    console.log("Punchline:", data.punchline);
  })
  .catch((error) => {
    console.error('There was a problem with your fetch operation:', error);
  });
```

This makes a GET request to the specified API URL for fetching a random joke.

It first checks if the response is successful (status code 200).

If successful, it parses the response body as JSON.

Then, it logs the setup and punchline of the joke from the retrieved data.

In case of any unsuccessful responses, it catches the error and logs a corresponding message.

_PS: copy and paste this code to the console to see the magic happening!_

***

## 🙌 Final Thoughts

**Resources:**

Learn the practical usage from these videos:

- https://www.youtube.com/watch?v=cuEtnrL9-H0
- https://youtu.be/37vxWr0WgQk
- https://youtu.be/yVRWSqIUWzY

Dive deep into the topic with the documentation:

- https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
- https://web.dev/articles/introduction-to-fetch
- https://www.freecodecamp.org/news/how-to-fetch-data-from-an-api-using-the-fetch-api-in-javascript/

Comment your views about this article!

Okay, that's it for today!

I hope you found this article helpful ❤️

Connect with me @ [Linktree](https://linktr.ee/arjuncodess/).

Follow me on @ [Twitter](https://twitter.com/arjuncodess/). Quality content coming soon!

Happy Coding! 🚀
Thanks for 26359! 🤗