JavaScript Fetch APIliuyicheng@meituan.com

JavaScript Fetch API

• Fetch API

• Service Workers

• Examples

Fetch API

• Replace XMLHttpRequest

• GlobalFetch，Headers，Request，Response，Body

• Feature detection 00

Compatibility

• https://github.com/github/fetch

• https://github.com/jakearchibald/es6-promise

GlobalFetch

• GlobalFetch.fetch()

• Implemented by Window & WorkerGlobalScope

fetch(input, init)

• input: USVString or A Request object

• init: method, headers, body, mode, credentials, cache

• Returns a Promise that resolves to a Response object

• Examples 01 02 03

Request

• Send in fetch

• Received in Service Workers

• Examples 04

• method, url, headers, referrer, mode, credentials, redirect, integrity, cache, clone()

Response

• Send in Service Workers

• Received in fetch

• Examples 05

• type, url, useFinalURL, status, ok, statusText, headers, clone(), error(), redirect()

Body

• mixin

• ArrayBuffer, ArrayBufferView, Blob/File, string, URLSearchParams, FormData

• arrayBuffer(), blob(), json(), text(), formData()

• Examples 06 07 08

Headers

• Send in request

• Received in response

• Headers(), append(), delete(), get(), getAll(), has(), set()

• Examples 09

Headers guard

• none, request, request-no-cors, response, immutable

• Examples 10

CORS

• mode: ‘cors’

• Examples 11 12

File Upload

• body: formData

• Example 13

Streaming

• request response body — read once

• Examples 14 15

Service Workers

• programmable network proxy

• Examples 16

Thanks