Technologieaustausch

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

🧑‍💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣

1. Wie bricht xmlHttpRequest die Anfrage ab?

Es gibt auch eine Abbruchmethode für das instanziierte XMLHttpRequest-Objekt.

const xhr = new XMLHttpRequest();
xhr.addEventListener('load', function(e) {
  console.log(this.responseText);
});
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
xhr.send();

1
2
3
4
5
6
7

// 返回
{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

1
2
3
4
5
6
7
8

Bei Abbruch direkt nach dem Senden bitte abbrechen

// xhr的取消操作：执行过程比较模糊，不知道abort什么时机进行处理
xhr.abort()

1
2
3

Wenn Sie die Anforderung während des Timers abbrechen (wenn die Timerdauer ähnlich der Dauer der Schnittstellenanforderung ist), werden Sie feststellen, dass die Ressource abgerufen wurde, aber kein Druck auf der Konsole erfolgt.

2. AbortController

const ac = new AbortController();
const { signal } = ac;
const url = "https://jsonplaceholder.typicode.com/todos/1";
​
fetch(url, { signal })
  .then((res) => res.json())
  .then((json) => console.log(json));

1
2
3
4
5
6
7
8

Verwenden Sie abort direkt, um die Anfrage abzubrechen

ac.abort()

1
2

Der Grund für den hier gemeldeten Fehler liegt darin, dass der Fehler nicht erfasst wurde.

// 修改后的代码
fetch(url, { signal: ac.signal })
  .then((res) => res.json())
  .then((json) => console.log(json))
  .catch(e => console.log(e)) // DOMException: signal is aborted without reason
ac.abort() // abort接受一个入参，会被传递到signal的reason属性中

1
2
3
4
5
6
7

Warum kann es so abgesagt werden?

fetch überwacht den Status des Signalobjekts und kann die Anfrage beenden

2.1 Wie kann ich mehrere Anfragen gleichzeitig stornieren?

const ac = new AbortController();
const { signal } = ac;
const url = "https://jsonplaceholder.typicode.com/todos";
​
const todoRequest = (id, { signal }) => {
  fetch(`${url}/${id}`, { signal })
    .then((res) => res.json())
    .then((json) => console.log(json))
    .catch((e) => console.log(e)); // DOMException: signal is aborted without reason
};
​
todoRequest(1, { signal });
todoRequest(2, { signal });
todoRequest(3, { signal });
​
ac.abort("cancled");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.2 Abbruchsignal

ist eine Schnittstelle zur Darstellung eines Signalobjekts, das die Kommunikation mit einem asynchronen Vorgang ermöglicht, der ausgeführt wird, sodass der Vorgang abgebrochen werden kann, bevor er abgeschlossen ist.

2.3 AbortSignal-Methode

2.3.1 Abbrechen

Statische Methode zum Erstellen eines abgebrochenen AbortSignal-Objekts. Wenn Sie diese Methode aufrufen, gibt sie eine AbortSignal-Instanz mit dem Abbruchstatus „true“ zurück.

const signalAbout = AbortSignal.abort(); // AbortSignal {aborted: true, reason: DOMException: signal is aborted without reason...}

1
2

2.3.2 throwIfAborted-Methode

Wird verwendet, um vor der Ausführung des Codes zu prüfen, ob das AbortSignal abgebrochen wurde. Wenn AbortSignal abgebrochen wurde, wird ein AbortError ausgegeben. Mit dieser Methode können Entwickler sicherstellen, dass sie vor der Ausführung eines bestimmten Vorgangs nicht abgebrochen werden, um unnötige Verarbeitung zu vermeiden.

const signalAbout = AbortSignal.abort('abortedReason');
try {
    signalAbout.throwIfAborted(); // 抛出error： abortedReason
} catch (error) {
    console.log(error);
}

1
2
3
4
5
6
7

2.3.3 Zeitüberschreitung

Wird zum Erstellen eines AbortSignal-Objekts verwendet, das nach einer bestimmten Zeit automatisch beendet wird. Dies ist nützlich, wenn Sie ein Anforderungszeitlimit festlegen müssen.

// 使用 AbortSignal.timeout 设置 10ms超时
const signalAbout = AbortSignal.timeout(10);
const todoRequest = (id, { signal }) => {
  fetch(`${url}/${id}`, { signal })
    .then((res) => res.json())
    .then((json) => console.log("json: ", json))
    .catch((e) => console.log("err: ", e)); //DOMException: signal timed out 
};
todoRequest(1, { signal: signalAbout });

1
2
3
4
5
6
7
8
9
10

2.3.3.1 Ereignis-Listener hinzufügen => von nicht beendet zu beendet

AbortSignal erbt von EventTarget, da AbortSignal zum Abhören von Abbruchereignissen verwendet wird und EventTarget einen Mechanismus zum Hinzufügen, Entfernen und Auslösen von Ereignis-Listenern bereitstellt.

const signalAbout = AbortSignal.timeout(10);
signalAbout.addEventListener("abort", (e) => {
    console.log("aborted: ", e);
})
​

1
2
3
4
5
6

Der Ausdruck von e ist wie folgt:

3. Setzen Sie ein proaktiv storniertes Versprechen um

const ac = new AbortController();
const { signal } = ac;
​
const cancelablePromise = ({signal}) => 
    new Promise((resolve, reject) => {
        // 情况1：直接主动取消
        signal?.throwIfAborted(); // 也可以用reject
​
        // 情况2：正常处理业务逻辑
​
        setTimeout(() => {
            Math.random() > 0.5 ? resolve('data') : reject('fetch error');
        }, 1000);
​
        // 情况3：超时 todo?
​
        // 监听取消
        signal.addEventListener("abort", () => {
            reject(signal?.reason);
        });
    })
// 发起网络请求
cancelablePromise({signal})
.then(res => console.log('res: ', res))
.catch(err => console.log('err: ', err))
// 情况1 
// ac.abort('用户离开页面了') // err:  用户离开页面了
​
// 情况2 正常请求 err:  fetch error || res:  data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

4. Wie kann ich das Signal verwenden, um das Abhören von Ereignissen abzubrechen?

Wenn einem Element mehrere Ereignis-Listener hinzugefügt werden, muss es nicht wie bei RemoveEventListener abgebrochen werden. Jedes Ereignis muss einmal abgebrochen werden, und das Ereignishandle des entsprechenden Ereignisses muss jedes Mal geschrieben werden.

Wenn Sie ein Signal verwenden, müssen Sie das Signal nur einmal abbrechen und die gesamte Ereignisüberwachung wird abgebrochen.

const ac = new AbortController();
const { signal } = ac;
const eleA = document.querySelector('#a');
const eleB = document.querySelector('#b');
​
function aEleHandler () {}; // 事件
eleA.addEventListener('click', aEleHandler, {signal}); // 无论绑定多少个事件，都只需要一个signal
​
eleB.addEventListener('click', () => {
    ac.abort(); // 只需要取消一次
})

1
2
3
4
5
6
7
8
9
10
11
12

5. Szenarien, in denen mehrere Schnittstellen für die Datenassemblierung angefordert werden

Wie kann diese kontinuierliche Netzwerkanforderung abgebrochen werden, wenn die Netzwerkgeschwindigkeit nicht gut ist?

const ac = new AbortController();
const { signal } = ac;
const fetchAndRenderAction = (signal) => {
    requestData(signal); // 多个串行或者并行的接口
    drawAndRender(signal); // 异步渲染
}
​
try{
    fetchAndRenderAction({signal})
}catch{
    // dosomething...
}

1
2
3
4
5
6
7
8
9
10
11
12
13

6. Zusammenfassung

Wenn der Benutzer die Seite aktiv verlässt oder das Netzwerk des Benutzers sehr feststeckt (die erwartete Rückgabereihenfolge lautet: Schnittstelle 1 => Schnittstelle 2; die Rückkehr von Schnittstelle 1 ist jedoch zu langsam, was zu Verwirrung in der Reihenfolge führt). Dies erfordert eine manuelle Eingabe Beendigung der Anfrage. Das Instanzsemaphorsignal des Konstruktors AbortController (kann als ref gespeichert werden), das Signal wird als Abrufparameter verwendet. Bei jeder Anforderung kann die Abbruchmethode manuell aufgerufen werden, um die vorherige Anforderung abzubrechen.

Wenn es für Sie hilfreich ist, können Sie gerne darauf achten. Ich werde die technische Dokumentation regelmäßig aktualisieren, damit alle gemeinsam diskutieren, lernen und Fortschritte machen können.