fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard

・Cancelable Promise
・AbortController
・Browserの対応状況
・Node.jsの対応状況

Transcript

1. fetchͷCancel/Abortํ๏ඪ४Խͷมભ Meguro.es #14 2018.3.29 tipo159
2. ΞδΣϯμ • Cancelable Promise (2015.4.10 - 2016.12.16) • AbortController (2017.1.5 - ) • BrowserͷରԠঢ়گ • Node.jsͷରԠঢ়گ 2
3. Cancelable Promise (2015.4.10 - 2016.12.16) • JavaScriptͷPromise࢓༷΁ͷ௥Ճ • ओͳ಺༰ • cancelΛresolve, rejectͱ͸ҧ͏ୈ3ͷঢ়ଶͱͯ͠௥Ճ • .NETͰ࢖ΘΕ͍ͯͨCancel TokenΛ࢖ͬͯΩϟϯηϧ • Domenic Denicola(Googleࣾһ)͕ɼ2016.12.16ʹGoogle ಺෦ͷ൓ରͷͨΊऔΓԼ͛(ৄࡉ͸ෆ໌) https://github.com/tc39/proposal-cancelable-promises 3
4. Cancelable Promiseͷαϯϓϧ async function f(cancelToken) { await a(); cancelToken.cancelIfRequested(); await b(); } const ct = new CancelToken(cancel => { cancelButton.onclick = cancel; }); f(ct); // NOTE: will be canceled if they click the cancel button 4
5. AbortController (2017.1.5 - ) • ࠷ॳ͸Promise࢓༷΁ͷ௥ՃΛ໨ࢦ͍͕ͯͨ͠ɼDOM࢓༷ ʹ௥Ճ͞Εͨ • ओͳ಺༰ • AbortControllerΦϒδΣΫτΛ࢖ͬͯΞϘʔτ • Promise΁ͷػೳ௥Ճͳ͠ • fetchҎ֎ʹ΋ద༻Մೳ • WHATWGͷDOM࢓༷ʹ͸௥ՃࡁΈ https://dom.spec.whatwg.org/ 5
6. AbortControllerͷྫ var controller = new AbortController(); var signal = controller.signal; var downloadBtn = document.querySelector('.download'); var abortBtn = document.querySelector('.abort'); downloadBtn.addEventListener('click', fetchVideo); abortBtn.addEventListener('click', function() { controller.abort(); console.log('Download aborted'); }); function fetchVideo() { ... fetch(url, {signal}).then(function(response) { ... }).catch(function(e) { reports.textContent = 'Download error: ' + e.message; }) } 6
7. BrowserͷରԠঢ়گ • αϙʔτࡁΈ • Chrome 66 • Edge 16 • Firefox 57 • ະαϙʔτ • Safari (Technology Preview 42 2017.10.18ʙ ਖ਼ࣜαϙʔτ͸ະ) 7
8. Node.jsͷରԠঢ়گ • Node.jsʹ͸DOMؔ࿈API͕ͳ͍ͨΊ࢖༻ෆՄ • polyfillΛ࢖͑͹࢖༻Մೳ https://www.npmjs.com/package/abortcontroller-polyfill 8