The Ultimate JavaScript Fetch API Cheatsheet

The Ultimate JavaScript Fetch API Cheatsheet

JavaScript fetch API usages, request options, async-await, intercepting, cancel request, and promise all. We have to cover in this article Fetch API use-cases and different aspects of usages. Fetch provides a generic definition of request and response object and it will involve in network requests.

JavaScript fetch API usages, request options, async-await, intercepting, cancel request, and promise all

Fetch API is not experimental anymore, It is Living Standard as per MDN. We have to cover in this article Fetch API use-cases and different aspects of usages. Fetch provides a generic definition of request and response object and it will involve in network requests.

The function fetch() is part of the global window object. It is a modern replacement for XMLHttpRequest. This can be used in code almost any part of the context.

Fetch

The fetch() has required one mandatory argument that is the URL of the resource. It returns a promise that resolves the response.

// GET Request.
fetch('https://api.github.com/users/rich-harris')
  // Handle success
  .then(response => response.json())  // convert to json
  .then(json => console.log(json))    // print data to console
  .catch(err => console.log('Request Failed', err)); // Catch errors

Request Options

The request also has an optional second argument with different request options. if you send JSON as the body it requires to use JSON.stringify()

/**
 * Fetch API
 * The option with * is the default
 */
{
  method: "POST", // *GET, POST, PUT, DELETE, etc.
  mode: "cors", // no-cors, cors, *same-origin
  cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
  credentials: "same-origin", // include, *same-origin, omit
  headers: {
    "Content-Type": "application/json", 
    // "Content-Type": "application/x-www-form-urlencoded",
  },
  redirect: "follow", // manual, *follow, error
  referrer: "no-referrer", // no-referrer, *client,
  body: JSON.stringify(data)
}

Sample POST request with request options

fetch('/save/data', {
  method: 'POST',  
  body: JSON.stringify(data),// if sending data as array or object
  headers: {
    'Content-Type': 'application/json'
  }
})

If HTML form as data the body will be

body: new FormData(form), // post body as form data
headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
}

javascript web-development programming api developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The JavaScript Web History API With Practical Examples

Understanding The Web History API in JavaScript. API stands for Application Programming Interface. A Web API is an application programming interface for the web. The web history API is supported by all the browsers. We can build our own Web API using different technologies such as Java or Node and etc.

A Simple Guide to API Development Tools

APIs can be as simple as 1 endpoint for use by 100s of users or as complex as the AWS APIs with 1000s of endpoints and 100s of thousands of users. Building them can mean spending a couple of hours using a low-code platform or months of work using a multitude of tools. Hosting them can be as simple as using one platform that does everything we need or as complex as setting up and managing ingress control, security, caching, failover, metrics, scaling.

Tracking a Developer’s Journey From Documentation Visit

Measuring website activity provides only half the story. See how to best track the developer's journey and what funnel stages makes sense for API-first products

How to Market to Developers with Paid Marketing

Selling to developers is hard. How to market to developers efficiently using paid advertising leveraging inbound marketing techniques.

The JavaScript Local Storage Web API with Practical Examples

LocalStorage is a part of the window object in JavaScript. The storage interface of the Web Storage API provides access to local storage that holds data permanently. LocalStorage in JavaScript is a property that allows us to save data to be stored in the browser even a user refreshes or closes a page.