Technology Sharing

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

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

1. How does xmlHttpRequest cancel a request?

There is also an abort method on the instantiated XMLHttpRequest object

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

If you cancel directly after sending

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

1
2
3

If you cancel the request during the timer (when the timer duration is about the same as the interface request duration), you will find that the resource has been obtained, but the console does not print

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

Use abort to cancel the request directly

ac.abort()

1
2

The reason for the error here is that the error is not captured

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

Why can it be cancelled like this?

fetch monitors the status of the signal object and terminates the request

2.1 How to cancel multiple requests at the same time?

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

Is an interface that represents a signal object that allows you to communicate with an executing asynchronous operation so that it can be aborted before completion.

2.3 AbortSignal Method

2.3.1 abort

Static method used to create an aborted AbortSignal object. When you call this method, it returns an AbortSignal instance with the aborted status set to true.

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

1
2

2.3.2 throwIfAborted method

Used to check if the AbortSignal has been aborted before executing the code. If the AbortSignal has been aborted, it will throw an AbortError. This method can help developers ensure that it has not been aborted before performing specific operations to avoid unnecessary processing.

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 timeout

Used to create an AbortSignal object that automatically aborts after a specified time. This is useful when you need to set a request timeout.

// 使用 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 Add event listener => From not terminated to terminated

AbortSignal inherits from EventTarget because AbortSignal is used to listen to abort events, and EventTarget provides a mechanism for adding, removing, and triggering event listeners.

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

1
2
3
4
5
6

The printout of e is as follows:

3. Implement an actively canceled promise

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. How to use signal to cancel event monitoring?

When multiple event listeners are added to an element, you do not need to cancel each event once like removeEventListener, and you need to specify the event handler of the corresponding event each time.

When using signal, you only need to cancel the signal once, and all event listeners will be canceled.

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. Scenario of requesting multiple interfaces for data assembly

When the network speed is not good, how to cancel this continuous network request?

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. Conclusion

When the user leaves the page on his own initiative, or the user's network is very slow (the expected return order is: interface 1 => interface 2; but interface 1 returns too slowly, resulting in a disordered order), the request needs to be terminated manually. The instance semaphore signal (which can be stored as a ref) of the constructor AbortController is used as a parameter of fetch. At each request, the abort method can be manually called to cancel the previous request.

If it is helpful to you, you are welcome to follow me. I will update the technical documentation regularly so that we can discuss and learn together and make progress together.