1.
JavaScript Fetch API
liuyicheng@meituan.com

2.
JavaScript Fetch API
• Fetch API
• Service Workers
• Examples

3.
Fetch API
• Replace XMLHttpRequest
• GlobalFetch，Headers，Request，Response，
Body
• Feature detection 00

4.
Compatibility
• https://github.com/github/fetch
• https://github.com/jakearchibald/es6-promise

5.
GlobalFetch
• GlobalFetch.fetch()
• Implemented by Window & WorkerGlobalScope

6.
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

7.
Request
• Send in fetch
• Received in Service Workers
• Examples 04
• method, url, headers, referrer, mode, credentials,
redirect, integrity, cache, clone()

8.
Response
• Send in Service Workers
• Received in fetch
• Examples 05
• type, url, useFinalURL, status, ok, statusText,
headers, clone(), error(), redirect()

9.
Body
• mixin
• ArrayBuffer, ArrayBufferView, Blob/File, string,
URLSearchParams, FormData
• arrayBuffer(), blob(), json(), text(), formData()
• Examples 06 07 08

10.
Headers
• Send in request
• Received in response
• Headers(), append(), delete(), get(), getAll(),
has(), set()
• Examples 09

11.
Headers guard
• none, request, request-no-cors, response,
immutable
• Examples 10

12.
CORS
• mode: ‘cors’
• Examples 11 12

13.
File Upload
• body: formData
• Example 13

14.
Streaming
• request response body — read once
• Examples 14 15

15.
Service Workers
• programmable network proxy
• Examples 16

16.
Thanks