fetch is the new XHR

Transcript

1. fetch is the new XHR othree @ coscup 2015
2. XHR • XMLHttpRequest • by Microsoft, 1999 • Make HTTP request in web page
3. Ajax • Most popular pattern based on XHR • Jesse James Garrett named it “AJAX” • Foundation of Single Page Application http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/
4. XHR Spec • W3C Working Draft since 2006, Level 2 since 2008 • WHATWG Living Standard since 2011
5. What’s in 2.0 CORS FormData ArrayBuffer File/Blob
6. function uploadFiles(url, files) { var formData = new FormData(); for (var i = 0, file; file = files[i]; ++i) { formData.append(file.name, file); } var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.onload = function(e) { ... }; xhr.send(formData); // multipart/form-data } document.querySelector('input[type="file"]') .addEventListener('change', function(e) { uploadFiles('/server', this.files); }, false);
7. function uploadFiles(url, files) { var formData = new FormData(); for (var i = 0, file; file = files[i]; ++i) { formData.append(file.name, file); } var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.onload = function(e) { ... }; xhr.send(formData); // multipart/form-data } document.querySelector(‘input[type="file"]') .addEventListener('change', function(e) { uploadFiles('/server', this.files); }, false);
8. function uploadFiles(url, files) { var formData = new FormData(); for (var i = 0, file; file = files[i]; ++i) { formData.append(file.name, file); } var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.onload = function(e) { ... }; xhr.send(formData); // multipart/form-data } document.querySelector(‘input[type="file"]') .addEventListener('change', function(e) { uploadFiles('/server', this.files); }, false);
9. function uploadFiles(url, files) { var formData = new FormData(); for (var i = 0, file; file = files[i]; ++i) { formData.append(file.name, file); } var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.onload = function(e) { ... }; xhr.send(formData); // multipart/form-data } document.querySelector(‘input[type="file"]') .addEventListener('change', function(e) { uploadFiles('/server', this.files); }, false);
10. function uploadFiles(url, files) { var formData = new FormData(); for (var i = 0, file; file = files[i]; ++i) { formData.append(file.name, file); } var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.onload = function(e) { ... }; xhr.send(formData); // multipart/form-data } document.querySelector(‘input[type="file"]') .addEventListener('change', function(e) { uploadFiles('/server', this.files); }, false);
13. XHR • 15 years old
14. 赫⻔门 at ShenJS ૄ൅ϖᇀؽ൅ඹ۱ᄅđభ؊׻߶଴၂П
15. 128x harder than 15 years ago
16. New Stuffs JSON FormData File/Blob Promise ServiceWorker ArrayBuffer
17. Not every new tech can apply to XHR without break it.
18. So here is the new XHR.
19. Fetch
20. Fetch • The unified architecture of resource fetching • img, script, css, cursor image, …etc • fetch() JavaScript API
21. Fetch • The unified architecture of resource fetching • img, script, css, cursor image, …etc • fetch() JavaScript API Today’s
22. fetch • Promise based • JSON support • Simple naming, options object • Designed as low level API
25. fetch('./api/some.json').then(function(response) { return response.json(); }).then(function(data) { console.log(data); });
26. fetch('./api/some.json').then(function(response) { return response.json(); }).then(function(data) { console.log(data); });
27. fetch('./api/some.json').then(function(response) { return response.json(); }).then(function(data) { console.log(data); });
28. fetch('./api/some.json').then(function(response) { return response.json(); }).then(function(data) { console.log(data); });
29. fetch('./api/some.txt').then(function(response) { return response.text(); }).then(function(data) { console.log(data); });
30. fetch('./api/some.file').then(function(response) { return response.blob(); }).then(function(data) { // console.log(data); });
31. fetch('./api/some.json') .then(res => res.json()) .then(data => console.log(data));
32. fetch('./api/entry', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }).then(function(response) { response.json().then(data => console.log(data)); return response; });
33. fetch('./api/entry', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-url-encoded' }, body: $.param(data) }); http://api.jquery.com/jquery.param/
34. fetch('./api/entry', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-url-encoded' }, body: $.param(data) }); http://api.jquery.com/jquery.param/
35. fetch('./api/entry', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-url-encoded' }, body: $.param(data) }); http://api.jquery.com/jquery.param/
36. var obj = { key1: 'value1', key2: [10, 20, 30] }; var str = $.param(obj); // "key1=value1&key2%5B%5D=10&key2%5B%5D=20&key2%5B%5D=30" https://www.npmjs.com/package/jquery-param
37. var obj = { key1: 'value1', key2: [10, 20, 30] }; var str = $.param(obj); // "key1=value1&key2%5B%5D=10&key2%5B%5D=20&key2%5B%5D=30" http://www.w3.org/TR/html5/forms.html#application/x-www-form-urlencoded-encoding-algorithm
38. var obj = { key1: 'value1', key2: [10, 20, 30] }; var str = $.param(obj); // "key1=value1&key2%5B%5D=10&key2%5B%5D=20&key2%5B%5D=30" // key1=value1 & // key2[]=10 & // key2[]=20 & // key2[]=30 http://www.w3.org/TR/html5/forms.html#application/x-www-form-urlencoded-encoding-algorithm
39. Or you can post JSON, or other format
40. fetch('./api/entry', { method:'POST', headers: { 'Content-Type': 'application/x-www-form-url-encoded' }, body: $.param(data) });
41. method headers body mode crendentials cache
42. method headers body mode crendentials cache
43. mode • The one XHR can’t do • same-origin • cors • no-cors
44. no-cors • Don’t check CORS • Get opaque response • For ServiceWorker • XHR can’t do this
45. method headers body mode crendentials cache
46. headers • POJSO(Plain Old JavaScript Object) { 'Content-Type': 'text/plain', 'X-Custom-Header', 'ProcessThisImmediately' }
47. fetch('./api/some.json', { method: 'POST', mode: 'no-cors', headers: { 'Content-Type': 'text/plain', 'X-Custom-Header', 'ProcessThisImmediately' } });
48. What if
49. What if Header have multiple entry with the same name?
50. Set-Cookie: JSESSIONID=alphabeta120394049; HttpOnly Set-Cookie: AWSELBID=baaadbeef6767676767690220; Path=/alpha https://community.apigee.com/articles/2319/how-to-handle-multi-value-headers-in-javascript.html
51. RFC 2616 Multiple message-header fields with the same field-name MAY be present in a message if and only if the entire field-value for that header field is defined as a comma-separated list [i.e., #(values)] http://www.w3.org/Protocols/rfc2616/rfc2616-sec4.html#sec4.2
52. Header Class • New global class • For both request and response headers https://developer.mozilla.org/en-US/docs/Web/API/Headers
53. var h = new Headers(); h.append( 'Set-Cookie', 'JSESSIONID=alphabeta120394049; HttpOnly' ); h.append( 'Set-Cookie', 'AWSELBID=baaadbeef6767676767690220; Path=/alpha' ); fetch(url, { headers: h });
54. var h = new Headers(); h.append( 'Set-Cookie', 'JSESSIONID=alphabeta120394049; HttpOnly' ); h.append( 'Set-Cookie', 'AWSELBID=baaadbeef6767676767690220; Path=/alpha' ); fetch(url, { headers: h });
55. var h = new Headers(); h.append( 'Set-Cookie', 'JSESSIONID=alphabeta120394049; HttpOnly' ); h.append( 'Set-Cookie', 'AWSELBID=baaadbeef6767676767690220; Path=/alpha' ); fetch(url, { headers: h });
56. append() delete() get() getAll() has() set()
57. Deal with Response
58. fetch('./api/some.json').then(function(response) { return response.json(); })
59. fetch('./api/some.json').then(function(response) { return response.json(); })
60. Response • New global class • Contains status, headers, body …
61. ok status url statusText headers type
62. ok status url statusText headers type
63. ok • “ok” is true when status is 2xx
64. Means • Fetch promise will resolve even when server respond 404, 500 … • Request is complete so Promise is resolved.
65. Reject? • On exception, ex: Network Error
66. arrayBuffer() blob() formData() json() text() bodyUsed
67. arrayBuffer() blob() formData() json() text() bodyUsed
68. Response Body • For formatted response body • No auto format detection • Body can consume only once
 (save memory) • Use clone when need consume twice
69. fetch('...').then(function (res) { if (res.ok) { if (res.headers.get('Content-Type') === 'application/json') return res.json(); } } })
70. fetch('...').then(function (res) { if (res.ok) { if (res.headers.get('Content-Type') === 'application/json') return res.json(); } } })
71. fetch('...').then(function (res) { if (res.ok) { if (res.headers.get('Content-Type') === 'application/json') return res.json(); } } })
72. fetch('...').then(function (res) { if (res.ok) { if (res.headers.get('Content-Type') === 'application/json') return res.json(); } } })
73. New Classes • Headers • Response
74. New Classes • Headers • Response • Request
75. Request • Another new global class • Contains method, headers, body …
76. Where to Use • Inside fetch • As fetch input
81. Ideally You Can • Create a request object • Reuse it
82. var req = new Request('http://blah', { method: 'POST', body: requestBody }); fetch(req); fetch(req);
83. But • Body can only consumed once
84. var req = new Request('http://blah', { method: 'POST', body: requestBody }); fetch(req); fetch(req); // TypeError
85. Issue #61 • Fix the different behaviors • Request will not able to reuse in the future https://github.com/whatwg/fetch/issues/61
86. Use fetch Now
88. Polyfill • by Github
 https://github.com/github/fetch
89. Node Polyfill • node-fetch
 https://www.npmjs.com/package/node-fetch • isomorphic-fetch
 https://www.npmjs.com/package/isomorphic-fetch
90. Fact • Debug:
 Chrome, at ‘other tab’, request body not shows
 Firefox, depend on response type
91. Fact • Safety flag for CORS not affect fetch 
 Affect Electron app 
 Use XHR + polyfill instead
92. Fact • Not able to cancel a fetch • Issue #27 • No solution now https://github.com/whatwg/fetch/issues/27
93. Fact • Not support progress now • fetch-with-streams • Future spec https://github.com/yutakahirano/fetch-with-streams
94. Streams • WHATWG Spec • Not Node Stream • Base on Promise
95. fetch(url).then(response => { var reader = response.body.getReader(); var decoder = new TextDecoder(); function drain(valueSoFar) { return reader.read().then(function(result) { valueSoFar += decoder.decode(result.value || new Uint8Arr if (result.done) return valueSoFar; return drain(valueSoFar); }); } return drain(); }).then(function(fullText) { console.log(fullText); }); https://github.com/whatwg/fetch/issues/28#issuecomment-87209944
96. fetch(url).then(response => { var reader = response.body.getReader(); var decoder = new TextDecoder(); function drain(valueSoFar) { return reader.read().then(function(result) { valueSoFar += decoder.decode(result.value || new Uint8Arr if (result.done) return valueSoFar; return drain(valueSoFar); }); } return drain(); }).then(function(fullText) { console.log(fullText); });
97. fetch(url).then(response => { var reader = response.body.getReader(); var decoder = new TextDecoder(); function drain(valueSoFar) { return reader.read().then(function(result) { valueSoFar += decoder.decode(result.value || new Uint8Arr if (result.done) return valueSoFar; return drain(valueSoFar); }); } return drain(); }).then(function(fullText) { console.log(fullText); });
98. fetch(url).then(response => { var reader = response.body.getReader(); var decoder = new TextDecoder(); function drain(valueSoFar) { return reader.read().then(function(result) { valueSoFar += decoder.decode(result.value || new Uint8Arr if (result.done) return valueSoFar; return drain(valueSoFar); }); } return drain(); }).then(function(fullText) { console.log(fullText); });
99. fetch(url).then(response => { var reader = response.body.getReader(); var decoder = new TextDecoder(); function drain(valueSoFar) { return reader.read().then(function(result) { valueSoFar += decoder.decode(result.value || new Uint8Arr if (result.done) return valueSoFar; return drain(valueSoFar); }); } return drain(); }).then(function(fullText) { console.log(fullText); });
100. fetch(url).then(response => { var reader = response.body.getReader(); var decoder = new TextDecoder(); function drain(valueSoFar) { return reader.read().then(function(result) { valueSoFar += decoder.decode(result.value || new Uint8Arr if (result.done) return valueSoFar; return drain(valueSoFar); }); } return drain(); }).then(function(fullText) { console.log(fullText); });
101. Code is complex But when we use ES7
102. Code is complex But when we use ES7 async/await
103. fetch(url).then(async response => { var reader = response.body.getReader(); var decoder = new TextDecoder(); var fullText = ''; var result; do { result = await reader.read(); fullText += decoder.decode(result.value || new Uint8Array, } while (!result.done); console.log(fullText); }); https://github.com/whatwg/fetch/issues/28#issuecomment-87209944
104. fetch(url).then(async response => { var reader = response.body.getReader(); var decoder = new TextDecoder(); var fullText = ''; var result; do { result = await reader.read(); fullText += decoder.decode(result.value || new Uint8Array, } while (!result.done); console.log(fullText); });
105. fetch(url).then(async response => { var reader = response.body.getReader(); var decoder = new TextDecoder(); var fullText = ''; var result; do { result = await reader.read(); fullText += decoder.decode(result.value || new Uint8Array, } while (!result.done); console.log(fullText); });
106. fetch(url).then(async response => { var reader = response.body.getReader(); var decoder = new TextDecoder(); var fullText = ''; var result; do { result = await reader.read(); fullText += decoder.decode(result.value || new Uint8Array,{ } while (!result.done); console.log(fullText); });
108. Current Status • Lots of new stuff is on the way • Streams, cancel • Browser integration • Cache, HTTP/2, CSP, subresource integrity,
 GET with body, busy indicator
109. Summary • fetch() supports lots of new stuff • Simple API design • Easy to use
110. But • fetch() is low level API • Need write extra codes • Hard to deal with general case • So there is fetch-er
111. fetch-er is the new $.ajax
112. fetch-er github.com/othree/fetcher
113. fetch-er • My open source project • A fetch helper, like jQuery.ajax • Named ‘fetch-er’ • NPM ‘fetcher’ already taken…
114. Why • fetch is low level API • Already familiar with jQuery.ajax API • Don’t repeat yourself
115. Repeat? • I must generate request body • I must detect response type • I must reject promise if response isn't ok
116. fetcher.getJSON('/api/users').then(function (data) { console.log(data[0]); });
117. fetcher.post('/api/users', {name: 'John'})
118. fetcher.post('/api/users', { name: 'John' }, { contentType: 'json' })
119. fetcher.method(url, data?, options?)
120. Features • Auto generate request body • Auto parse response type and convert data • jQuery similar behavior • Timeout support • Global options
121. Dealing Response • Always return an array
 (Promise only accepts one value) • [data, statusText, response]
122. fetcher.get('/api/entry').then(function (res) { var data = res[0]; var status = res[1]; var response = res[2]; });
123. Why not use object?
124. Why not use object? Better for ES6 destructuring assign
125. fetcher.get('/api/entry') .then(function ([data, status, response]) { });
126. fetcher.get('/api/entry') .then(([data, status, response]) => { });
127. Target User • Want to use ES6 Promise to control flow • Don’t want to deal with data formatting stuff • Familiar with jQuery.ajax
128. TODO • jsonp? • processData
129. Patch Welcome
130. One More Thing
131. sendBeacon • POST data to analytic service • Don’t care about response
132. navigator.sendBeacon('/log', analyticsData);
134. Q?