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
500
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
430
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
950
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
630
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
630
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
590
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.3k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
900
Other Decks in Programming
See All in Programming
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
4
250
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
150
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
710
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
770
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
620
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
720
Select API from Kotlin Coroutine
jmatsu
1
210
NPOでのDevinの活用
codeforeveryone
0
690
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
260
Featured
See All Featured
Scaling GitHub
holman
459
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
The Invisible Side of Design
smashingmag
300
51k
Unsuck your backbone
ammeep
671
58k
Thoughts on Productivity
jonyablonski
69
4.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
A designer walks into a library…
pauljervisheath
207
24k
Making Projects Easy
brettharned
116
6.3k
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