Browser APIs (or web APIs) are the APIs that come built-in with the browsers. They allow developers to perform complex operations without dealing with the sophisticated lower-level code. There are a number of browser APIs for manipulating the DOM, making network requests, managing client-side storage, and retrieving device media streams, etc.

In the present, new web APIs are introduced and existing APIs are being deprecated in a frequent manner (eg: Battery API, WebVR API, etc), and there are also some APIs that have not been standardized yet. However, there still are some useful browser APIs that are widely used in the field of front end web development.

This article presents you with several such browser APIs that you must know as a front-end developer. Having a good understanding of these will significantly level up your front end development skills regardless of what front end framework you are working with.

---

1. Fetch API

Fetch API is the first one on this list. It is used for performing network requests from the browser. Before Fetch API was introduced, there did were some browser-inbuilt network request mechanisms, but the problem was that none of them were standardized so that developers had to take all possible solutions into consideration when writing code to perform network requests. The aim of introducing Fetch API is to introduce a standard to perform network requests. The aim has been fulfilled since, in the present, all major browsers support the fetch API.

Fetch API provides a generic definition of Request and Response so that it is universal .i.e. can be used in a wide variety of contexts such as service workers, cache API, etc. whenever network requests are needed to make. It also hides low-level details and provides more control over the network requests than the good old XMLHTTPRequest API.

Using fetch API is really simple. What it needs are a mandatory endpoint URL and an optional [init](https://developer.mozilla.org/en-US/docs/Web/API/Request#Properties) object. The following JS snippet shows how to use fetch API to perform various types of HTTP network requests.

// GET 
fetch(''https://jsonplaceholder.typicode.com/todos/1'')
 .then(response => response.json())
 .then(json => console.log(json))

// POST
fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
      title: 'foo',
      body: 'bar',
      userId: 1
    }),
    credentials: 'include', 
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  })
  .then(response => response.json())
  .then(json => console.log(json))

// PUT
fetch('https://jsonplaceholder.typicode.com/posts/1', {
    method: 'PUT',
    body: JSON.stringify({
      id: 1,
      title: 'foo',
      body: 'bar',
      userId: 1
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  })
  .then(response => response.json())
  .then(json => console.log(json))

// DELETE
fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE',
})

#javascript #web-development #api #browsers #programming