Building Your Own Fetch API in JavaScript

Hey there, fellow coders! Today, we’re going to dive into something really cool — creating our very own version of the Fetch API in JavaScript. Don’t worry if that sounds complicated; we’ll break it down into easy-to-understand steps.

What’s the Fetch API?

First things first: the Fetch API is a tool in JavaScript that helps us grab data from the internet. It’s like a helpful friend who goes to the library to get books for you.

Why Build Our Own?

You might wonder, “Why build our own if JavaScript already has one?” Great question! Building our own helps us understand how things work under the hood. Plus, it’s fun and great for learning!

Let’s Get Started!

We’ll call our version myFetch. Here's how we'll build it:

1. Create a function that takes a URL
2. Use XMLHttpRequest (an older way of fetching data) inside our function
3. Wrap everything in a Promise (a way to handle tasks that take time)
4. Return the result

Here’s the code:

function myFetch(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(`Request failed with status ${xhr.status}`));
      }
    };
    
    xhr.onerror = function() {
      reject(new Error('Network error'));
    };
    
    xhr.send();
  });
}

Let’s break this down:

1. We create a function called myFetch that takes a url as input.
2. Inside, we return a new Promise. Promises are great for handling tasks that might take some time.
3. We create an XMLHttpRequest object (let's call it xhr). This is the old-school way of fetching data.
4. We set up the request with xhr.open('GET', url). This says we want to GET data from the URL.
5. We add two event listeners:

• onload: This runs when we get a response. If it's successful (status 200), we resolve the promise with the data. If not, we reject with an error.
• onerror: This runs if there's a network error, and we reject the promise.

6. Finally, we send the request with xhr.send().

How to Use Our myFetch

Now that we’ve built our myFetch, let's use it!

myFetch('https://api.example.com/data')
  .then(response => {
    console.log('Data received:', response);
  })
  .catch(error => {
    console.error('Oops, something went wrong:', error);
  });

This code tries to fetch data from ‘https://api.example.com/data'. If it works, it logs the data. If there’s an error, it logs the error.

Making It Even Better

We can improve our myFetch by adding support for different HTTP methods (like POST) and allowing custom headers. Here's an upgraded version:

function myFetchPlus(url, options = {}) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(options.method || 'GET', url);
    
    if (options.headers) {
      Object.keys(options.headers).forEach(key => {
        xhr.setRequestHeader(key, options.headers[key]);
      });
    }
    
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject(new Error(`Request failed with status ${xhr.status}`));
      }
    };
    
    xhr.onerror = function() {
      reject(new Error('Network error'));
    };
    
    xhr.send(options.body);
  });
}

Now we can use it like this:

myFetchPlus('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => console.log('Data sent successfully:', response))
  .catch(error => console.error('Error:', error));

Wrapping Up

And there you have it! We’ve built our own mini version of the Fetch API. Remember, the real Fetch API has more features and is more robust, but this exercise helps us understand the basics of how it works.

Keep coding and exploring! The more you build, the more you learn. Happy fetching!

Do You want to learn more like above content ?

Follow me or message me on Linkedin.