Menu

React, etc. Tech Stack

React, Flux, GraphQL, Hack, HHVM...? All of this and more!

Fetch is the native AJAX API to replace jQuery.get()

As a term AJAX has been around for over a decade now. While many still relate to it as rich and fluid interfaces, the real deal is the possibility of making asynchronous requests to the server from the browser.

As browsers evolved the XMLHttpRequest API used for AJAX did not not evolve. This is why many developers still rely on including the whole jQuery library just to abstract asynchronous HTTP Request. jQuery has a great and simple to use API for many things, but including it just for AJAX is overkill.

Finally the Web API has a new native alternative available. This is known as the Fetch API and offers a very simple way of getting content from the server with JavaScript in the browser. The API is a high level one that has a generic definition of HTTP Request and Response objects.

To anyone used to working with the HTTP, the concepts are immediately familiar:

In addition to standard features developers would expect, the Fetch API definition handles closely related concepts such as CORS (Cross-origin resource sharing) and HTTP origin headers. The fetch resouce is available in the browser's standard window object and has only a single mandatory argument - the request URL.

The fetch method returns a JavaScript promise that makes it convenient to work with the asynchronous nature of HTTP requests in the browser context. Once the response is received, there are a number of methods available in the object.

Browser support for the Fetch API is very good with evergreen browsers such as Chrome, Edge, Firefox and Opera already supporting the feature. Internet Explorer does not support the API, but there is a fetch API polyfill that can be used for it.

Written by Jorgé on Saturday July 9, 2016

Permalink -

« What to consider when architecting a Headless CMS project - Facebook could mint BitCoins in the browser with JavaScript and your GPU »