AbortSignal: I didn’t have a choice before, now I want to abort the promise

Hi everyone, I'm Kasong.

Thinking about an interview a few years ago, the interviewer asked me: What are the disadvantages of promise

I really can't think about it...

The answer is: promise is initialized, it cannot be stopped. This is determined by the implementation of promise

AbortSignal The emergence of promise semantically becomes available aborted. And, as long as it conforms to the specification, all asynchronous operations can be changed to which can be aborted by .

What is AbortSignal

AbortSignal is an experimental API , but the compatibility is not bad, and polyfill is not complicated to implement.

AbortSignal can instantiate a signal object ( signal object ).

AbortController can instantiate a signal object controller.

Just like the remote control can send a signal to turn off the TV, AbortController can control the stop signal.

As long as it conforms to AbortSignal , any asynchronous operation can realize the abort function.

For example, first, a controller instance of new

// 控制器实例
const controller = new AbortController();
const signal = controller.signal;

Where signal signal object corresponding to the controller.

signal object can listen to the abort event and is triggered when the signal is aborted.

After calling the controller.abort() method, the signal will be aborted. At this time, signal.aborted is true .

// 监听 abort 事件
signal.addEventListener('abort', () => {
  console.log("信号中止!")
});

// 控制器中止信号
controller.abort(); 

console.log('是否中止：', signal.aborted); 

After the above code is called, it will be printed in sequence:

1. Signal aborted!
2. Whether to abort: true

Application in fetch

fetch API has integrated AbortSignal .

It is only necessary to controller the signal object as the signal parameter to fetch :

const controller = new AbortController();
fetch(url, {
  signal: controller.signal
});

After calling controller.abort() , fetch of promise will become AbortError DOMException reject :

fetch('xxxx', {
  signal: controller.signal
}).then(() => {}, err => {
  if (err.name == 'AbortError') { 
    // 中止信号
  } else {
    // 其他错误
  }
})

You can process the operations after the termination at this time.

Here is a cancel video download Demo , you can see how fetch cooperates with AbortSignal to cancel the download

Combine with any asynchronous operation

Not only fetch , any asynchronous operation can be integrated AbortError as long as it meets the following specifications:

1. The AbortSignal (target signal) as API a signal parameters passed
2. It is agreed that if the API returned by promise becomes AbortError DOMException reject , the operation is aborted
3. If signal.aborted === true then immediately make promise become reject
4. Observe the change of AbortSignal

If the API application scenario is more complex (for example, multi-threaded communication needs to be considered), the document provides a set of abort-algorithms subscription release to complete step 4.

Summarize

Although the AbortSignal is very simple, as long as it adheres to the access specification, its scalability is very strong.

For example, a can signal pass more compliant API , multiple controllers can be suspended by a API call.

It's like a remote control that can operate the air conditioner, TV, and washing machine in your home at the same time. Do you love it?

Welcome to join the human high-quality front-end framework research group , lead the flight