Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

fetchのCancel Abort方法標準化の変遷 / A History of Cance...

tipo159
March 29, 2018

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

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

tipo159

March 29, 2018
Tweet

More Decks by tipo159

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. AbortController (2017.1.5 - ) • ࠷ॳ͸Promise࢓༷΁ͷ௥ՃΛ໨ࢦ͍͕ͯͨ͠ɼDOM࢓༷ ʹ௥Ճ͞Εͨ • ओͳ಺༰ •

    AbortControllerΦϒδΣΫτΛ࢖ͬͯΞϘʔτ • Promise΁ͷػೳ௥Ճͳ͠ • fetchҎ֎ʹ΋ద༻Մೳ • WHATWGͷDOM࢓༷ʹ͸௥ՃࡁΈ https://dom.spec.whatwg.org/ 5
  4. 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
  5. BrowserͷରԠঢ়گ • αϙʔτࡁΈ • Chrome 66 • Edge 16 •

    Firefox 57 • ະαϙʔτ • Safari (Technology Preview 42 2017.10.18ʙ ਖ਼ࣜαϙʔτ͸ະ) 7