Slide 1
Slide 1 text
fetchͷCancel/Abortํ๏ඪ४Խͷมભ
Meguro.es #14
2018.3.29
tipo159
Slide 2
Slide 2 text
ΞδΣϯμ
• Cancelable Promise (2015.4.10 - 2016.12.16)
• AbortController (2017.1.5 - )
• BrowserͷରԠঢ়گ
• Node.jsͷରԠঢ়گ
2
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
AbortController (2017.1.5 - )
• ࠷ॳPromise༷ͷՃΛࢦ͍͕ͯͨ͠ɼDOM༷
ʹՃ͞Εͨ
• ओͳ༰
• AbortControllerΦϒδΣΫτΛͬͯΞϘʔτ
• PromiseͷػೳՃͳ͠
• fetchҎ֎ʹద༻Մೳ
• WHATWGͷDOM༷ʹՃࡁΈ
https://dom.spec.whatwg.org/
5
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
BrowserͷରԠঢ়گ
• αϙʔτࡁΈ
• Chrome 66
• Edge 16
• Firefox 57
• ະαϙʔτ
• Safari (Technology Preview 42 2017.10.18ʙ
ਖ਼ࣜαϙʔτະ)
7
Slide 8
Slide 8 text
Node.jsͷରԠঢ়گ
• Node.jsʹDOMؔ࿈API͕ͳ͍ͨΊ༻ෆՄ
• polyfillΛ͑༻Մೳ
https://www.npmjs.com/package/abortcontroller-polyfill
8