The document summarizes the JavaScript Fetch API, which replaces XMLHttpRequests and allows for making network requests and receiving responses. It includes 3 key points: 1) The Fetch API uses a global Fetch object and returns Promises that resolve to Response objects containing the fetched resource. Requests are made via the fetch() method and accept Request objects. 2) Request and Response objects represent the request sent and response received, containing properties like headers, method, url, and status. The Body mixin allows reading request/response bodies. 3) Service Workers act as programmable proxy servers, intercepting and handling network requests and responses, and examples are provided for common use cases like file uploads and streaming with the

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