DEV Community

Zakaria EL AISSAOUI
Zakaria EL AISSAOUI

Posted on

๐—”๐—ฏ๐—ผ๐—ฟ๐˜๐—ถ๐—ป๐—ด ๐—ผ๐—ป๐—ด๐—ผ๐—ถ๐—ป๐—ด ๐—ฎ๐—ฐ๐˜๐—ถ๐˜ƒ๐—ถ๐˜๐—ถ๐—ฒ๐˜€ ๐˜‚๐˜€๐—ถ๐—ป๐—ด ๐˜๐—ต๐—ฒ ๐—”๐—ฏ๐—ผ๐—ฟ๐˜๐—–๐—ผ๐—ป๐˜๐—ฟ๐—ผ๐—น๐—น๐—ฒ๐—ฟ ๐—ถ๐—ป๐˜๐—ฒ๐—ฟ๐—ณ๐—ฎ๐—ฐ๐—ฒ.

๐—”๐—ฏ๐—ผ๐—ฟ๐˜๐—ถ๐—ป๐—ด ๐—ผ๐—ป๐—ด๐—ผ๐—ถ๐—ป๐—ด ๐—ฎ๐—ฐ๐˜๐—ถ๐˜ƒ๐—ถ๐˜๐—ถ๐—ฒ๐˜€ ๐˜‚๐˜€๐—ถ๐—ป๐—ด ๐˜๐—ต๐—ฒ ๐—”๐—ฏ๐—ผ๐—ฟ๐˜๐—–๐—ผ๐—ป๐˜๐—ฟ๐—ผ๐—น๐—น๐—ฒ๐—ฟ ๐—ถ๐—ป๐˜๐—ฒ๐—ฟ๐—ณ๐—ฎ๐—ฐ๐—ฒ.

The AbortSignal interface represents a signal object that allows you to communicate with a DOM request (such as a fetch request) and abort it if required via an AbortController object.

๐—”. ๐—”๐˜€๐˜†๐—ป๐—ฐ ๐˜„๐—ผ๐—ฟ๐—ธ ๐—ถ๐—ป ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜:
Let's take the example of data fetching placed inside a useEffect hook.
If this effect doesn't finish before it's fired again (re-render), we may have two requests running in parallel.
To make things better, we can create an AbortController instance that will be aborted whenever the next effect runs.
๐˜ž๐˜ฉ๐˜ฆ๐˜ฏ ๐˜ข๐˜ฃ๐˜ฐ๐˜ณ๐˜ต() ๐˜ช๐˜ด ๐˜ค๐˜ข๐˜ญ๐˜ญ๐˜ฆ๐˜ฅ, ๐˜ต๐˜ฉ๐˜ฆ ๐˜ง๐˜ฆ๐˜ต๐˜ค๐˜ฉ() ๐˜ฑ๐˜ณ๐˜ฐ๐˜ฎ๐˜ช๐˜ด๐˜ฆ ๐˜ณ๐˜ฆ๐˜ซ๐˜ฆ๐˜ค๐˜ต๐˜ด ๐˜ธ๐˜ช๐˜ต๐˜ฉ ๐˜‹๐˜–๐˜”๐˜Œ๐˜น๐˜ค๐˜ฆ๐˜ฑ๐˜ต๐˜ช๐˜ฐ๐˜ฏ ๐˜ฏ๐˜ข๐˜ฎ๐˜ฆ๐˜ฅ ๐˜ˆ๐˜ฃ๐˜ฐ๐˜ณ๐˜ต๐˜Œ๐˜ณ๐˜ณ๐˜ฐ๐˜ณ.

๐—•. ๐—ฅ๐—ฒ๐—บ๐—ผ๐˜ƒ๐—ถ๐—ป๐—ด ๐—˜๐˜ƒ๐—ฒ๐—ป๐˜ ๐—›๐—ฎ๐—ป๐—ฑ๐—น๐—ฒ๐—ฟ๐˜€:
To remove an event handler, you have to keep hold of the original reference.
Using AbortSignal, you can get the signal to remove it for you.

Promise-based APIs wishing to support aborting can accept an AbortSignal object, and use its state to determine how to proceed (https://bit.ly/3HB3hjQ).

code snippet

Top comments (0)