Mozilla's JavaScript Fetch API Aims to Supplant XHR

Mozilla has published a specification for a new JavaScript Fetch API that offers developers a more powerful and flexible interface for fetching resources across the network.

"For more than a decade the Web has used XMLHttpRequest (XHR) to achieve asynchronous requests in JavaScript. While very useful, XHR is not a very nice API," Mozilla's Nikhil Marathe explained on the Mozilla Hacks blog. "It suffers from lack of separation of concerns. The input, output and state are all managed by interacting with one object, and state is tracked using events. Also, the event-based model doesn’t play well with JavaScript’s recent focus on Promise- and generator-based asynchronous programming."

The Fetch API, Mozilla hopes, will "[nail] down the semantics of a user agent fetching a resource," offering a solution to these issues in the process.

Fetch consists of three interfaces, Headers, Request and Response, each of which is aligned to the same basic HTTP concepts. As its name suggests, the Headers interface describes the headers associated with an HTTP request, and in the context of a request, a Headers object can be used by a developer to specify custom headers. The Request interface describes a request to retrieve a resource over HTTP. This includes the URL and method.

The core of the Fetch API is a fetch function. Provided with a Request object, or URL, it will return a JavaScript promise that resolves to a Response object containing the data returned by the requested resource. This includes the response body as well as headers. As Marathe alluded to, promises have rapidly grown in popularity with JavaScript developers, as they make managing asynchronous operations much easier than using callbacks, which can become particularly unwieldy in more complex applications.

For non-GET or HEAD requests, the body of request can be one of a number of JavaScript data structures, including FormData, ArrayBuffer, Blob, BufferSource, URLSearchParams or USVString. According to Marathe, the Fetch API offers "a significant improvement over XHR in terms of ease of use of non-text data." The Fetch API also offers developers the ability to more easily work with cross-site HTTP requests using a mode parameter that describes whether cross-site HTTP requests should be allowed. A cors mode allows for cross-origin requests that adhere to the CORS protocol.

Combined with ServiceWorker, Marathe says, the Fetch API will further the goals of the Extensible Web Manifesto and help developers build better offline experiences. But it's not quite ready for prime time and still trails XHR in some areas. Specifically, developers cannot abort fetches or track fetch progress — deal-breakers for some applications.

Those issues are being addressed, and developers eager to start experimenting with the Fetch API can do so using the nightly and dev builds of Firefox 39 and Chrome 42. Developers are also encouraged to contribute to the development of the Fetch API through the WHAT Working Group.

Be sure to read the next Application Development article: Google Play Adds App Review and App Rating Processes


Comments (0)