AbortSignal
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨Ð°Ð¿ÑÐµÐ»Ñ 2018 г.â©.
* Some parts of this feature may have varying levels of support.
ÐкÑпеÑименÑалÑÐ½Ð°Ñ Ð²Ð¾Ð·Ð¼Ð¾Ð¶Ð½Ð¾ÑÑÑ: ÐÑо ÑкÑпеÑименÑалÑÐ½Ð°Ñ ÑеÑ
нологиÑ
Так как ÑпеÑиÑикаÑÐ¸Ñ ÑÑой ÑеÑ
нологии еÑÑ Ð½Ðµ ÑÑабилизиÑовалаÑÑ, ÑмоÑÑиÑе ÑаблиÑÑ ÑовмеÑÑимоÑÑи по Ð¿Ð¾Ð²Ð¾Ð´Ñ Ð¸ÑполÑÐ·Ð¾Ð²Ð°Ð½Ð¸Ñ Ð² ÑазлиÑнÑÑ
бÑаÑзеÑаÑ
. Также замеÑÑÑе, ÑÑо ÑинÑакÑÐ¸Ñ Ð¸ поведение ÑкÑпеÑименÑалÑной ÑеÑ
нологии Ð¼Ð¾Ð¶ÐµÑ Ð¸Ð·Ð¼ÐµÐ½Ð¸ÑÑÑÑ Ð² бÑдÑÑиÑ
веÑÑиÑÑ
бÑаÑзеÑов, вÑлед за изменениÑми ÑпеÑиÑикаÑии.
AbortSignal инÑеÑÑÐµÐ¹Ñ Ð¿ÑедÑÑавлÑÐµÑ Ñобой обÑÐµÐºÑ Ñигнала, коÑоÑÑй позволÑÐµÑ Ð²Ð°Ð¼ обÑаÑÑÑÑ Ñ DOM запÑоÑом (напÑимеÑ, Fetch) и пÑеÑваÑÑ ÐµÐ³Ð¾ пÑи необÑ
одимоÑÑи Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ Ð¾Ð±ÑекÑа AbortController.
СвойÑÑва
AbortSignal Ñакже наÑледÑÐµÑ ÑвойÑÑва Ð¾Ñ Ñвоего ÑодиÑелÑÑкого инÑеÑÑейÑа, EventTarget.
AbortSignal.abortedТолÑко Ð´Ð»Ñ ÑÑениÑ-
ÐÑо
Boolean, коÑоÑÑй ÑказÑваеÑ, оÑменÑн ли запÑоÑ(Ñ), Ñ ÐºÐ¾ÑоÑÑм ÑвÑзÑвалÑÑ Ñигнал, оÑменÑн (true) или Ð½ÐµÑ (false).
ÐбÑабоÑÑики ÑобÑÑий
AbortSignal.onabort-
ÐÑзÑваеÑÑÑ ÐºÐ¾Ð³Ð´Ð° пÑоиÑÑ Ð¾Ð´Ð¸Ñ ÑобÑÑие
abort, Ñ.е. когда DOM запÑоÑ(Ñ), Ñ ÐºÐ¾ÑоÑÑм ÑвÑзÑвалÑÑ Ñигнал, оÑменÑн.
ÐеÑодÑ
AbortSignal наÑледÑÐµÑ Ð¼ÐµÑÐ¾Ð´Ñ Ð¾Ñ ÑодиÑелÑÑкого инÑеÑÑейÑа, EventTarget.
ÐÑимеÑÑ
Ð ÑледÑÑÑем ÑÑагменÑе Ð¼Ñ Ð±Ñдем загÑÑжаÑÑ Ð²Ð¸Ð´ÐµÐ¾ иÑполÑзÑÑ Fetch API.
СнаÑала Ð¼Ñ ÑоздаÑм конÑÑÐ¾Ð»Ð»ÐµÑ Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ ÐºÐ¾Ð½ÑÑÑÑкÑоÑа AbortController(), а заÑем полÑÑаем ÑÑÑÐ»ÐºÑ Ð½Ð° ÑвÑзаннÑй обÑÐµÐºÑ AbortSignal иÑполÑзÑÑ ÑвойÑÑво AbortController.signal.
Ðогда fetch запÑÐ¾Ñ Ð¸Ð½Ð¸ÑииÑÑеÑÑÑ, Ð¼Ñ Ð¿ÐµÑедаÑм AbortSignal в каÑеÑÑве опÑии внÑÑÑÑ Ð¾Ð±ÑекÑа паÑамеÑÑов запÑоÑа (Ñм. {signal} ниже). ÐÑо ÑвÑзÑÐ²Ð°ÐµÑ Ñигнал и конÑÑÐ¾Ð»Ð»ÐµÑ Ñ fetch запÑоÑом и позволÑÐµÑ Ð½Ð°Ð¼ пÑеÑваÑÑ ÐµÐ³Ð¾, вÑзвав AbortController.abort(), как показано ниже во вÑоÑом обÑабоÑÑике ÑобÑÑий.
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('ÐагÑÑзка пÑеÑвана');
});
function fetchVideo() {
...
fetch(url, {signal}).then(function(response) {
...
}).catch(function(e) {
reports.textContent = 'ÐÑибка загÑÑзки: ' + e.message;
})
}
ÐÑимеÑание:
Ðогда abort() вÑзÑваеÑÑÑ, fetch() пÑÐ¾Ð¼Ð¸Ñ Ð¾ÑклонÑеÑÑÑ Ñ AbortError.
ÐÑедÑпÑеждение:
ТекÑÑÐ°Ñ Ð²ÐµÑÑÐ¸Ñ Firefox оÑклонÑÐµÑ Ð¿ÑÐ¾Ð¼Ð¸Ñ Ñ DOMException
ÐÑ Ð¼Ð¾Ð¶ÐµÑе найÑи полнÑй ÑабоÑий пÑÐ¸Ð¼ÐµÑ Ð½Ð° GitHub â Ñм. abort-api (Ñм. как он ÑабоÑÐ°ÐµÑ Ð² живÑÑ).
СпеÑиÑикаÑии
| Specification |
|---|
| DOM > # interface-AbortSignal > |
СовмеÑÑимоÑÑÑ Ñ Ð±ÑаÑзеÑами
СмоÑÑиÑе Ñакже
- Fetch API
- Abortable Fetch by Jake Archibald