Fetch API Demo

The Fetch API provides a modern interface for making HTTP requests. It returns Promises and supports various request/response types.

Fetch API available: checking...

Make Request

MethodGETPOSTPUTDELETE

URL

Headers (JSON)

Body (for POST/PUT) Send RequestExample: Get PostsExample: Get UsersExample: Create Post

Response

Status: Type: Time:

BodyHeaders

Make a request to see the response...

Fetch API Features

fetch(url, options) returns a Promise<Response> Options: - method: 'GET', 'POST', 'PUT', 'DELETE', etc. - headers: Headers object or plain object - body: String, FormData, Blob, ArrayBuffer, URLSearchParams - mode: 'cors', 'no-cors', 'same-origin' - credentials: 'omit', 'same-origin', 'include' - cache: 'default', 'no-store', 'reload', 'no-cache', 'force-cache' - redirect: 'follow', 'error', 'manual' - signal: AbortController.signal for cancellation Response methods: - response.json() - Parse as JSON - response.text() - Get as text - response.blob() - Get as Blob - response.arrayBuffer() - Get as ArrayBuffer - response.formData() - Get as FormData Response properties: - response.ok (status 200-299) - response.status - response.statusText - response.headers - response.url - response.type