Search  
Always will be ready notify the world about expectations as easy as possible: job change page
Apr 13

Fetch API in JavaScript with examples

Fetch API in JavaScript with examples
Source:
Views:
492

The JavaScript fetch() method is used to fetch resources from a server. It returns a Promise that resolves to the Response object representing the response to the request.

The fetch method can also make HTTP requests - GET request (to get data) and POST request (to post data). Fetch also integrates advanced HTTP concepts such as CORS and other extensions to HTTP.

Note: Fetch API comes with the fetch() method, which is used to fetch data from different sources.

fetch('url') // api for the get request
    .then(response => response.json())
    .then(data => console.log(data));

Parameters:

  • URL: The URL to which the request is to be made.
  • Options: It is an array of properties. It is an optional parameter. Options available are:
    • Method: Specifies HTTP method for the request. (can be GET, POST, PUT or DELETE)
    • Headers
    • Body: Data to be sent with the request.
    • Mode: Specifies request mode(eg. cors, nocors, same-origin, etc)
    • Credentials: Specifies whether to send user credentials (cookies, authentication headers, etc.) with the request

JavaScript fetch() method examples

Let’s look at some of the examples of the fetch method. These examples provide you with a complete understanding of the fetch method in JavaScript.

Example 1: GET request using fetch

This example shows how to make GET request in fetch method.

Note: Without options, Fetch will always act as a get request.

// API for get requests
let fetchRes = fetch(
"https://jsonplaceholder.typicode.com/todos/1");
    
// FetchRes is the promise to resolve
// it by using.then() method
fetchRes.then(res =>
    res.json()).then(d => {
        console.log(d)
    })

Output:

get request in fetch method javascript

Explanation:

  1. The JS fetch() function is used to send a GET request to the URL “https://jsonplaceholder.typicode.com/todos/1”. This function returns a Promise that resolves to a Response object representing the response to the request.
  2. The then() method is chained to the fetch() call to handle the response asynchronously. Inside the callback function passed to then(), the res.json() method is called to parse the response body as JSON. This method also returns a Promise that resolves to the parsed JSON data.
  3. Another then() method is chained to handle the parsed JSON data. Inside its callback function, the parsed JSON data d is logged to the console using console.log()

Example 2: Using fetch to POST JSON data

In this example, we have uploaded JSON data using the fetch() API in JavaScript, you can set the request body to a JSON stringified version of your data and set the appropriate headers to indicate that you’re sending JSON.

Post requests can be made using fetch by giving the options given below:

let options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(data)
}

After checking the Syntax of the post request, look at the example below which demonstrates using post request in fetch method.

// Your JSON data
const jsonData = { key1: 'value1', key2: 'value2' };

// Set up options for the fetch request
const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json' // Set content type to JSON
  },
  body: JSON.stringify(jsonData) // Convert JSON data to a string and set it as the request body
};

// Make the fetch request with the provided options
fetch('https://api.example.com/upload', options)
  .then(response => {
    // Check if the request was successful
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    // Parse the response as JSON
    return response.json();
  })
  .then(data => {
    // Handle the JSON data
    console.log(data);
  })
  .catch(error => {
    // Handle any errors that occurred during the fetch
    console.error('Fetch error:', error);
  });

Explanation:

  • We define your JSON data.
  • We set up options for the fetch request, including the method set to ‘POST’, the Content-Type header set to ‘application/json’, and the body set to the JSON stringified version of your data.
  • We make the fetch request with the provided options using the fetch() function.
  • The rest of the code remains the same as before, handling the response and any errors that occur during the fetch.

Example 3: Aborting a fetch request

You can use the AbortController and AbortSignal interface to abort a fetch request in JavaScript.

// Create a new AbortController instance
const controller = new AbortController();
const signal = controller.signal;

// Make the fetch request with the signal
const fetchPromise = fetch('https://api.example.com/data', { signal });

// Timeout after 5 seconds
const timeoutId = setTimeout(() => {
  controller.abort(); // Abort the fetch request
  console.log('Fetch request timed out');
}, 5000);

// Handle the fetch request
fetchPromise
  .then(response => {
    // Check if the request was successful
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    // Parse the response as JSON
    return response.json();
  })
  .then(data => {
    // Handle the JSON data
    console.log(data);
  })
  .catch(error => {
    // Handle any errors that occurred during the fetch
    console.error('Fetch error:', error);
  })
  .finally(() => {
    clearTimeout(timeoutId); // Clear the timeout
});

Explanation:

  • We create a new AbortController instance and obtain its signal.
  • We make the fetch request using fetch() with the provided options.
  • We set a timeout of 5 seconds using setTimeout() to abort the fetch request if it takes too long.
  • Inside the timeout callback, we call controller.abort() to abort the fetch request.
  • We handle the fetch request as usual, including parsing the response and handling any errors.
  • Finally, in the finally() block, we clear the timeout using clearTimeout() to prevent the timeout from triggering if the fetch request completes before the timeout expires.

Sending a request including credentials

To send a request including credentials, such as cookies, in a fetch request, you can set the credentials property to include.

fetch("https://example.com", {
  credentials: "include",
});

If you only want to send credentials if the request URL is on the same origin as the calling script, add credentials: ‘same-origin’.

// The calling script is on the origin 'https://example.com'
fetch("https://example.com", {
  credentials: "same-origin",
});

JavaScript fetch() method use cases

Here are some of the use cases of the fetch method. These are common issues that beginner developers face when working with fetch.

1. How to use JavaScript Fetch API to get data

JavaScript Get request is used to retrieve Data from a server. To use the Fetch API in JavaScript to get data from a server, you can make a GET request to the desired URL and handle the response.

2. GET and POST method using Fetch API

A fetch() method can be used with any type of request such as POST, GET, PUT, and DELETE, GET method uses fetch API.

3. Difference between Fetch and Axios for making http requests

Axios is a stand-alone third-party package that can be easily installed and Fetch is built into most modern browsers; no installation is required as such.

Supported browsers:

fetch() is an ECMAScript6 (ES6) feature and is supported on almost all modern browsers like:

  • Google Chrome
  • Edge
  • Firefox
  • Opera
  • Safari
Similar
Feb 3, 2022
Author: Satish Chandra Gupta
What if programming languages were stocks? And you had to make a portfolio to fetch good returns in 2022?You probably have seen various surveys and analyses listing the most popular programming languages. Those cover the universe of programming languages, like...
Apr 5, 2023
Author: Juan Alberto España Garcia
Learn the key differences between abstract classes and interfaces in C# programming, and understand when to use each one effectively.In object-oriented programming, abstract classes and interfaces serve as blueprints for creating objects in C#. While they have some similarities, they...
May 8, 2023
Author: Waqas Ahmed
Dapper is a lightweight ORM (Object-Relational Mapping) framework for .NET Core and is commonly used to query databases in .NET Core applications. Here are some of the advanced features of Dapper in .NET Core: Multi-Mapping: Dapper allows...
one month ago
Author: Kostiantyn Bilous
Imagine a situation where you are working on an extensive financial application that processes thousands of transactions per minute. You discover that the system's performance has sharply declined at some point, and users begin to complain about delays. Upon analysis,...
Send message
Email
Your name
*Message


© 1999–2024 WebDynamics
1980–... Sergey Drozdov
Area of interests: .NET Framework | .NET Core | C# | ASP.NET | Windows Forms | WPF | HTML5 | CSS3 | jQuery | AJAX | Angular | React | MS SQL Server | Transact-SQL | ADO.NET | Entity Framework | IIS | OOP | OOA | OOD | WCF | WPF | MSMQ | MVC | MVP | MVVM | Design Patterns | Enterprise Architecture | Scrum | Kanban