Partage de technologie

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

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

1. Comment xmlHttpRequest annule-t-il la demande ?

Il existe également une méthode d'abandon sur l'objet XMLHttpRequest instancié.

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

En cas d'abandon directement après l'envoi, annulez

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

1
2
3

Si vous annulez la demande pendant le timer (lorsque la durée du timer est similaire à la durée de la requête d'interface), vous constaterez que la ressource a été obtenue, mais il n'y a pas d'impression sur la console.

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

Utilisez abort directement pour annuler la demande

ac.abort()

1
2

La raison de l'erreur signalée ici est que l'erreur n'a pas été capturée.

// 修改后的代码
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

Pourquoi peut-il être annulé comme ça ?

fetch surveille l'état de l'objet signal et peut mettre fin à la demande

2.1 Comment annuler plusieurs demandes en même temps ?

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 AbortSignal

est une interface utilisée pour représenter un objet signal qui vous permet de communiquer avec une opération asynchrone en cours d'exécution afin que l'opération puisse être interrompue avant qu'elle ne soit terminée.

2.3 Méthode AbortSignal

2.3.1 abandonner

Méthode statique utilisée pour créer un objet AbortSignal abandonné. Lorsque vous appelez cette méthode, elle renvoie une instance AbortSignal avec le statut abandonné true.

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

1
2

2.3.2 Méthode throwIfAborted

Utilisé pour vérifier si l'AbortSignal a été abandonné avant d'exécuter le code. Si AbortSignal a été abandonné, il générera une AbortError. Cette méthode peut aider les développeurs à s'assurer qu'ils ne sont pas abandonnés avant d'effectuer une opération spécifique afin d'éviter un traitement inutile.

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 Délai d'attente

Utilisé pour créer un objet AbortSignal qui se termine automatiquement après une heure spécifiée. Ceci est utile lorsque vous devez définir un délai d'expiration de la demande.

// 使用 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 Ajouter un écouteur d'événement => de non terminé à terminé

AbortSignal hérite de EventTarget, car AbortSignal est utilisé pour écouter les événements d'abandon, et EventTarget fournit un mécanisme pour ajouter, supprimer et déclencher des écouteurs d'événements.

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

1
2
3
4
5
6

L’impression de e est la suivante :

3. Mettre en œuvre une promesse annulée de manière proactive

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. Comment utiliser le signal pour annuler l'écoute d'un événement ?

Lorsque plusieurs écouteurs d'événement sont ajoutés à un élément, il n'est pas nécessaire de l'annuler comme RemoveEventListener. Chaque événement doit être annulé une fois et le handle d'événement de l'événement correspondant doit être écrit à chaque fois.

Lors de l'utilisation du signal, vous n'avez besoin d'annuler le signal qu'une seule fois et toute surveillance d'événements sera annulée.

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. Scénarios dans lesquels plusieurs interfaces sont requises pour l'assemblage de données

Comment annuler cette demande réseau continue lorsque le débit du réseau n’est pas bon ?

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. Résumé

Lorsque l'utilisateur quitte activement la page, ou que le réseau de l'utilisateur est très bloqué (l'ordre de retour attendu est : interface 1 => interface 2 ; mais le retour de l'interface 1 est trop lent, ce qui entraîne une confusion dans l'ordre.) Cela nécessite un manuel cessation de la demande. Le signal sémaphore d'instance du constructeur AbortController (peut être stocké comme ref), le signal est utilisé comme paramètre de récupération. A chaque requête, la méthode abort peut être appelée manuellement pour annuler la requête précédente.

Si cela vous est utile, n'hésitez pas à y prêter attention. Je mettrai régulièrement à jour la documentation technique afin que chacun puisse discuter, apprendre et progresser ensemble.