Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
fetchのCancel Abort方法標準化の変遷 / A History of Cance...
Search
tipo159
March 29, 2018
Programming
1
510
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
・Cancelable Promise
・AbortController
・Browserの対応状況
・Node.jsの対応状況
tipo159
March 29, 2018
Tweet
Share
More Decks by tipo159
See All by tipo159
Type-safe front-end development using Rust/Rustを使った型安全なフロントエンド開発
tipo159
0
440
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
520
REASONの紹介 / Introductory talk about REASON
tipo159
1
390
PWAで何ができるようになるのか / What does PWA do
tipo159
1
970
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
640
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
640
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
600
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.3k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
910
Other Decks in Programming
See All in Programming
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
130
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
190
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
360
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
2.1k
1から理解するWeb Push
dora1998
7
2k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
2.8k
RDoc meets YARD
okuramasafumi
4
170
速いWebフレームワークを作る
yusukebe
5
1.7k
AI時代のUIはどこへ行く?
yusukebe
18
9.2k
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
250
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Typedesign – Prime Four
hannesfritz
42
2.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Docker and Python
trallard
46
3.6k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Music & Morning Musume
bryan
46
6.8k
Embracing the Ebb and Flow
colly
87
4.8k
Transcript
fetchͷCancel/Abortํ๏ඪ४Խͷมભ Meguro.es #14 2018.3.29 tipo159
ΞδΣϯμ • Cancelable Promise (2015.4.10 - 2016.12.16) • AbortController (2017.1.5
- ) • BrowserͷରԠঢ়گ • Node.jsͷରԠঢ়گ 2
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
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
AbortController (2017.1.5 - ) • ࠷ॳPromise༷ͷՃΛࢦ͍͕ͯͨ͠ɼDOM༷ ʹՃ͞Εͨ • ओͳ༰ •
AbortControllerΦϒδΣΫτΛͬͯΞϘʔτ • PromiseͷػೳՃͳ͠ • fetchҎ֎ʹద༻Մೳ • WHATWGͷDOM༷ʹՃࡁΈ https://dom.spec.whatwg.org/ 5
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
BrowserͷରԠঢ়گ • αϙʔτࡁΈ • Chrome 66 • Edge 16 •
Firefox 57 • ະαϙʔτ • Safari (Technology Preview 42 2017.10.18ʙ ਖ਼ࣜαϙʔτະ) 7
Node.jsͷରԠঢ়گ • Node.jsʹDOMؔ࿈API͕ͳ͍ͨΊ༻ෆՄ • polyfillΛ͑༻Մೳ https://www.npmjs.com/package/abortcontroller-polyfill 8