AbortController
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨Ð¼Ð°ÑÑ 2019 г.â©.
ÐкÑпеÑименÑалÑÐ½Ð°Ñ Ð²Ð¾Ð·Ð¼Ð¾Ð¶Ð½Ð¾ÑÑÑ: ÐÑо ÑкÑпеÑименÑалÑÐ½Ð°Ñ ÑеÑ
нологиÑ
Так как ÑпеÑиÑикаÑÐ¸Ñ ÑÑой ÑеÑ
нологии еÑÑ Ð½Ðµ ÑÑабилизиÑовалаÑÑ, ÑмоÑÑиÑе ÑаблиÑÑ ÑовмеÑÑимоÑÑи по Ð¿Ð¾Ð²Ð¾Ð´Ñ Ð¸ÑполÑÐ·Ð¾Ð²Ð°Ð½Ð¸Ñ Ð² ÑазлиÑнÑÑ
бÑаÑзеÑаÑ
. Также замеÑÑÑе, ÑÑо ÑинÑакÑÐ¸Ñ Ð¸ поведение ÑкÑпеÑименÑалÑной ÑеÑ
нологии Ð¼Ð¾Ð¶ÐµÑ Ð¸Ð·Ð¼ÐµÐ½Ð¸ÑÑÑÑ Ð² бÑдÑÑиÑ
веÑÑиÑÑ
бÑаÑзеÑов, вÑлед за изменениÑми ÑпеÑиÑикаÑии.
ÐнÑеÑÑÐµÐ¹Ñ AbortController пÑедÑÑавлÑÐµÑ Ð¾Ð±ÑÐµÐºÑ ÐºÐ¾Ð½ÑÑоллеÑа, коÑоÑÑй позволÑÐµÑ Ð²Ð°Ð¼ пÑи необÑ
одимоÑÑи обÑÑваÑÑ Ð¾Ð´Ð¸Ð½ и более DOM запÑоÑов.
ÐÑ Ð¼Ð¾Ð¶ÐµÑе ÑоздаÑÑ Ð½Ð¾Ð²Ñй обÑÐµÐºÑ AbortController иÑполÑзÑÑ ÐºÐ¾Ð½ÑÑÑÑкÑÐ¾Ñ AbortController.AbortController(). ÐзаимодейÑÑвие Ñ DOM запÑоÑами Ñделано Ñ Ð¸ÑполÑзованием обÑекÑа AbortSignal.
ÐонÑÑÑÑкÑоÑ
AbortController.AbortController()-
СоздаÑÑ Ð½Ð¾Ð²Ñй ÑкземплÑÑ
AbortController.
СвойÑÑва
AbortController.signalТолÑко Ð´Ð»Ñ ÑÑениÑ-
ÐозвÑаÑÐ°ÐµÑ ÑкземплÑÑ
AbortSignal, коÑоÑÑй Ð¼Ð¾Ð¶ÐµÑ Ð±ÑÑÑ Ð¸ÑполÑзован Ð´Ð»Ñ ÐºÐ¾Ð¼Ð¼ÑникаÑий/оÑÑановки DOM запÑоÑов.
ÐеÑодÑ
AbortController.abort()-
ÐÑеÑÑÐ²Ð°ÐµÑ DOM запÑÐ¾Ñ Ð´Ð¾ моменÑа его завеÑÑениÑ. ÐÑо даÑÑ Ð²Ð¾Ð·Ð¼Ð¾Ð¶Ð½Ð¾ÑÑÑ Ð¾Ð±ÑÑваÑÑ fetch запÑоÑÑ, поÑÑебиÑелей лÑбÑÑ Ð¾ÑвеÑов Ñ
Bodyи поÑоки.
ÐÑимеÑÑ
Ð ÑекÑÑем ÑÑагменÑе Ð¼Ñ Ð¿ÑÑаемÑÑ ÑкаÑаÑÑ Ð²Ð¸Ð´ÐµÐ¾ иÑполÑзÑÑ Fetch API.
ÐÐ»Ñ Ð½Ð°Ñала Ð¼Ñ Ñоздадим конÑÑÐ¾Ð»Ð»ÐµÑ Ð¸ÑполÑзÑÑ ÐºÐ¾Ð½ÑÑÑÑкÑÐ¾Ñ AbortController(), заÑем возÑмÑм ÑÑÑÐ»ÐºÑ Ð½Ð° аÑÑоÑииÑованнÑй Ñ Ð½Ð¸Ð¼ обÑÐµÐºÑ AbortSignal иÑполÑзÑÑ ÑвойÑÑво AbortController.signal.
ÐÑи иниÑиализаÑии fetch запÑоÑа, Ð¼Ñ Ð¿ÐµÑедаÑм AbortSignal в каÑеÑÑве паÑамеÑÑа (ÑмоÑÑиÑе ниже {signal}). ÐÑо аÑÑоÑииÑÑÐµÑ Ñигнал и конÑÑÐ¾Ð»Ð»ÐµÑ Ñ fetch запÑоÑом и даÑÑ Ð½Ð°Ð¼ возможноÑÑÑ Ð¾ÑÑановиÑÑ Ð·Ð°Ð¿ÑÐ¾Ñ Ð²Ñзовом меÑода AbortController.abort(), ÑÑо можно ÑвидеÑÑ Ð²Ð¾ вÑоÑом addEventListener.
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;
})
}
ÐÑимеÑание:
ÐÑи вÑзове abort(), пÑÐ¾Ð¼Ð¸Ñ fetch() бÑÐ´ÐµÑ Ð¾ÑклонÑн Ñ AbortError.
ÐÑ Ð¼Ð¾Ð¶ÐµÑе найÑи полнÑй ÑабоÑий пÑÐ¸Ð¼ÐµÑ Ð½Ð° GitHub â ÑмоÑÑиÑе abort-api (и живой пÑимеÑ).
СпеÑиÑикаÑии
| Specification |
|---|
| DOM > # interface-abortcontroller > |
СовмеÑÑимоÑÑÑ Ñ Ð±ÑаÑзеÑами
СмоÑÑиÑе Ñакже
- Fetch API
- Abortable Fetch Ð¾Ñ Jake Archibald