Manchmal kann es schwierig sein, asynchrone Aufgaben auszuführen, insbesondere wenn eine bestimmte Programmiersprache den Abbruch von Vorgängen nicht zulässt, die versehentlich gestartet wurden oder nicht mehr benötigt werden. Glücklicherweise bietet JavaScript eine sehr praktische Funktionalität zum Abbrechen asynchroner Aktivitäten. In diesem Artikel erfahren Sie, wie Sie abbrechbare Funktionen erstellen.
Abbruchsignal
Nach der Einführung vonPromisein ES2015 und dem Aufkommen einiger Web-APIs, die bald neue asynchrone Lösungen unterstützen,Es trat die Notwendigkeit auf, asynchrone Aufgaben abzubrechen. Erste Versuche konzentrieren sich darauf,eine universelle Lösung zu schaffenmit der Hoffnung, in Zukunft Teil des ECMAScript-Standards zu werden. Die Diskussion geriet jedoch schnell in eine Sackgasse und konnte das Problem nicht lösen. Daher hat die WHATWG eine eigene Lösung vorbereitet und diesedirekt in das DOMAbortControllerin Form voneingebracht. Der offensichtliche Nachteil dieser Lösung besteht darin, dassAbortControllerin Node.js nicht verfügbar ist, sodass es in dieser Umgebung keine elegante oder offizielle Möglichkeit gibt, eine asynchrone Aufgabe abzubrechen.
Wie Sie in der DOM-Spezifikation sehen können, wirdAbortControllersehr allgemein beschrieben. Sie können es also in jeder Art von asynchroner API verwenden – auch in solchen, die noch nicht existieren. Derzeit wird nur die Fetch-API offiziell unterstützt, Sie können sie aber auch in Ihrem eigenen Code verwenden!
Bevor wir beginnen, nehmen wir uns einen Moment Zeit, um zu analysieren, wieAbortControllerfunktioniert:
const abortController = new AbortController(); // 1 const abortSignal = abortController.signal; // 2 fetch( 'http://example.com', { signal: abortSignal // 3 } ).catch( ( { message } ) => { // 5 console.log( message ); } ); abortController.abort(); // 4
Schauen Sie sich den Code oben an und Sie werden es sehen Es wird festgestellt, dass zu Beginn eine neue Instanz derAbortControllerDOM-Schnittstelle erstellt wird (1) und derensignal-Eigenschaften an Variablen gebunden sind (2). Rufen Sie dannfetch()auf, indem Siesignalals eine seiner Optionen übergeben (3). Um das Abrufen einer Ressource abzubrechen, rufen Sie einfachabortController.abort()(4) auf. Das Versprechen vonfetch（）wird automatisch abgelehnt und die Kontrolle wird an den Blockcatch()(5) übergeben.
signalDas Anwesen selbst ist sehr interessant und der Hauptdarsteller der Show. Diese Eigenschaft ist eine Instanz derAbortSignalDOM-Schnittstelle, die über einaborted-Attribut verfügt, das Informationen darüber enthält, ob der Benutzer dieabortController.abort()-Methode aufgerufen hat. Sie können denabort-Ereignis-Listener auch an den Ereignis-Listener binden, der aufgerufen wird, wennabortController.abort()aufgerufen wird. Mit anderen Worten:AbortControllerist nur die öffentliche Schnittstelle vonAbortSignal. <> Daten
function calculate() { return new Promise( ( resolve, reject ) => { setTimeout( ()=> { resolve( 1 ); }, 5000 ); } ); } calculate().then( ( result ) => { console.log( result ); } );
Calculate" title="" data-original-title="复制">
在上面的代码中，向按钮（1）添加一个异步click事件侦听器，并在其中调用calculate()函数（2）。五秒钟后，将显示带有结果的警报对话框（3）。另外，script [type = module]用于强制 JavaScript 代码进入严格模式——因为它比'use strict'编译指示更为优雅。
现在添加中止异步任务的功能：
{ // 1 let abortController = null; // 2 document.querySelector('#calculate').addEventListener('click',async ( { target } )=>{ if ( abortController ) { abortController.abort(); // 5 abortController = null; target.innerText = 'Calculate'; return; } abortController = new AbortController(); // 3 target.innerText = 'Stop calculation'; try { const result = await calculate( abortController.signal ); // 4 alert( result ); } catch { alert( 'WHY DID YOU DO THAT?!' ); // 9 } finally { // 10 abortController = null; target.innerText = 'Calculate'; } } ); function calculate( abortSignal ) { return new Promise( ( resolve, reject ) => { const timeout = setTimeout( ()=> { resolve( 1 ); }, 5000 ); abortSignal.addEventListener( 'abort', () => { // 6 const error = new DOMException( 'Calculation aborted by the user', 'AbortError' ); clearTimeout( timeout ); // 7 reject( error ); // 8 } ); } ); } }
如你所见，代码变得更长了。但是没有理由惊慌，它并没有变得更难理解！
一切都包含在块（1）中，该块相当于IIFE。因此，abortController变量（2）不会泄漏到全局作用域内。
首先，将其值设置为null。鼠标单击按钮时，此值会更改。然后将其值设置为AbortController的新实例（3）。之后，将实例的signal属性直接传递给你的calculate()函数（4）。
如果用户在五秒钟之内再次单击该按钮，则将导致调用abortController.abort()函数（5）。反过来，这将在你先前传递给calculate()的AbortSignal实例上触发abort事件（6）。
在abort事件侦听器内部，删除了滴答计时器（7）并拒绝了带有适当错误的promise （8;根据规范，它必须是类型为'AbortError'的DOMException）。该错误最终把控制权传递给catch（9）和finally块（10）。
你还应该准备处理如下情况的代码：
const abortController = new AbortController(); abortController.abort(); calculate( abortController.signal );
在这种情况下，abort事件将不会被触发，因为它发生在将信号传递给calculate()函数之前。因此你应该进行一些重构：
function calculate( abortSignal ) { return new Promise( ( resolve, reject ) => { const error = new DOMException( 'Calculation aborted by the user', 'AbortError' ); // 1 if ( abortSignal.aborted ) { // 2 return reject( error ); } const timeout = setTimeout( ()=> { resolve( 1 ); }, 5000 ); abortSignal.addEventListener( 'abort', () => { clearTimeout( timeout ); reject( error ); } ); } ); }
错误被移到顶部（1）。因此，你可以在代码不同部分中重用它（但是，创建一个错误工厂会更优雅，尽管听起来很愚蠢）。另外出现了一个保护子句，检查abortSignal.aborted（2）的值。如果等于true，那么calculate()函数将会拒绝带有适当错误的 promise，而无需执行任何其他操作。
这就是创建完全可中止的异步函数的方式。 演示可在这里获得（https://blog.comandeer.pl/ass...）。请享用！
英文原文地址：https://ckeditor.com/blog/Aborting-a-signal-how-to-cancel-an-asynchronous-task-in-JavaScript/
相关教程推荐：JavaScript视频教程
Das obige ist der detaillierte Inhalt vonWie kann ich eine asynchrone Aufgabe in JavaScript abbrechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
