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
630
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
640
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
910
Other Decks in Programming
See All in Programming
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
320
Porting a visionOS App to Android XR
akkeylab
0
910
What's new in AppKit on macOS 26
1024jp
0
170
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
構文解析器入門
ydah
7
1.8k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
640
20250708_JAWS_opscdk
takuyay0ne
2
150
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
590
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
150
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
990
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
240
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Being A Developer After 40
akosma
90
590k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Site-Speed That Sticks
csswizardry
10
720
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Optimizing for Happiness
mojombo
379
70k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
A better future with KSS
kneath
238
17k
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