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
960
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
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
130
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
12
2.6k
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
890
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
530
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
610
実践!App Intents対応
yuukiw00w
1
280
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.8k
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
110
兎に角、コードレビュー
mitohato14
0
120
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
1
280
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
200
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.2k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
We Have a Design System, Now What?
morganepeng
53
7.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Scaling GitHub
holman
462
140k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Designing for Performance
lara
610
69k
Site-Speed That Sticks
csswizardry
10
770
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
4 Signs Your Business is Dying
shpigford
184
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
Into the Great Unknown - MozCon
thekraken
40
2k
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