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
430
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
350
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
450
REASONの紹介 / Introductory talk about REASON
tipo159
1
360
PWAで何ができるようになるのか / What does PWA do
tipo159
1
880
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
550
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
570
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
540
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.1k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
870
Other Decks in Programming
See All in Programming
開発を加速する共有Swift Package実践
elmetal
PRO
0
420
Prolog入門
qnighy
4
1k
Why Prism?
kddnewton
4
1.7k
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
オートマトン学習しろ / Do automata learning
makenowjust
3
130
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
590
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
LangChainの現在とv0.3にむけて
os1ma
4
920
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
390
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
2
560
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Facilitating Awesome Meetings
lara
49
6k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
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