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 Cancel Abort Method Standard
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
320
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
440
REASONの紹介 / Introductory talk about REASON
tipo159
1
360
PWAで何ができるようになるのか / What does PWA do
tipo159
1
870
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
530
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
550
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
860
Other Decks in Programming
See All in Programming
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
CSC307 Lecture 06
javiergs
PRO
0
360
CSC307 Lecture 08
javiergs
PRO
0
330
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
Activities at Cairo Library
cairolibrary720
0
1.2k
유연한 Composable 설계
l2hyunwoo
0
380
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
CSC307 Lecture 05
javiergs
PRO
0
210
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
227
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Unsuck your backbone
ammeep
666
57k
GitHub's CSS Performance
jonrohan
1026
450k
The Invisible Customer
myddelton
117
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Thoughts on Productivity
jonyablonski
64
4.1k
A Philosophy of Restraint
colly
200
16k
Git: the NoSQL Database
bkeepers
PRO
423
64k
It's Worth the Effort
3n
181
27k
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