Fetch API

Fetch API
Name	Fetch API
Developer	WHATWG / W3C
Introduced	2015
Standard	Fetch Living Standard
Language	JavaScript
Platform	Web platform

Fetch API is a modern Web platform interface for making network requests in JavaScript environments. It provides a promise-based replacement for XMLHttpRequest that integrates with other Web platform standards such as Service Worker, Streams API, and CORS. The API design was driven by the WHATWG and influenced by authors and implementers from organizations like Mozilla and Google.

Overview

The Fetch specification is maintained alongside the HTML Living Standard by WHATWG and has been discussed in coordination with W3C working groups. It introduces global objects and primitives that operate on Request and Response representations, enabling modern features such as streaming bodies compatible with the Streams API and integration with Service Worker life cycles. Implementations exist in browsers including Chrome, Firefox, Safari, and Edge, and it influenced server-side runtimes such as Node.js and Deno.

Core Concepts

Fetch centers on a few primary abstractions: the immutable Request object, the immutable Response object, and the concept of a Body mixin that provides methods like text(), json(), and arrayBuffer(). The promise-based nature relies on Promises standardized in ECMAScript 2015 and interacts with AbortController and AbortSignal for request cancellation. The API models network state using concepts drawn from protocols like HTTP/1.1 and HTTP/2 and surfaces Headers as an interface for name/value pairs. Fetch semantics include distinctions such as same-origin policy handled by CORS, credentials modes, cache modes, and redirect modes that mirror behavior discussed in RFC 7231 and related IETF specifications.

Usage and Examples

Typical usage involves calling fetch() with a URL or a Request instance and handling the returned promise. A minimal example converts a response to JSON and processes it with promises or async/await, a pattern familiar to developers working with React, Angular, or Vue.js projects. Fetch integrates with Service Worker fetch events to enable offline strategies used by Progressive Web Apps and works with Streams API to progressively process large payloads as implemented in Chrome and Firefox engines. Server-side environments such as Node.js adopted compatible fetch implementations, enabling isomorphic code shared between Next.js applications and backend services.

Error Handling and Status Codes

Fetch resolves its promise for any completed HTTP response, including client and server error status codes like 4xx and 5xx; it rejects the promise only on network errors, CORS violations, or if explicitly aborted via AbortController. Developers should inspect Response#ok and Response.status to branch on outcomes and map statuses to application logic—patterns common in RESTful APIs, GraphQL gateways, and OAuth 2.0 flows. Error propagation integrates with Promise chains and async/await try/catch blocks, enabling telemetry and retry strategies similar to practices recommended by organizations such as Google and Mozilla.

Security and CORS

Security considerations include adherence to the same-origin policy, CORS preflight behavior for certain methods and headers, and restrictions on credentials controlled via the credentials option. Fetch interacts with Content Security Policy and Mixed Content rules enforced by browsers like Safari and Edge. Service Worker scope and lifecycle policies affect interception of fetch requests in progressive web apps; these interactions are relevant to deployments on platforms such as GitHub Pages or Netlify. Developers must consider secure transport (TLS) and token handling practices similar to guidelines from OWASP to mitigate risks like cross-site request forgery and token leakage.

Browser Support and Polyfills

Major browsers implemented fetch across releases of Chrome, Firefox, Safari, and Edge (Chromium), with earlier versions providing partial capabilities that later aligned with the Fetch Living Standard. For legacy environments or older Internet Explorer versions, polyfills and libraries—often authored by developers affiliated with projects like GitHub and MDN Web Docs—offer compatibility shims built on top of XMLHttpRequest or native platform facilities. Server-side ecosystems such as Node.js and Deno provide native or third-party modules to match web fetch semantics for universal codebases used in frameworks like Next.js and Nuxt.js.

Category:Web APIs Category:JavaScript Category:Web development