ts-req-strategy

When you’re doing some side-effectful or time-consuming operations, it could be beneficial to control how requests are issued to your backend.

Possible values for ts-req-strategy are:

• first - prevent triggering new requests until the active one finishes (useful for forms)
• last - abort active request when a new one is triggered
• queue (default) - send requests as they are triggered

Examples

Autocomplete #

Autocomplete is interesting because it executes many things at once. Just look at the source, the interesting part is trigger modifiers - it does something only if user typed something (rather than just navigated field with cursor keys) and then stopped for 100 ms.

When autocomplete triggers a time-consuming operation (e.g. full-text search), the implementation above triggers numerous requests if the user types slow enough. If requests finish at different durations, an older request can override the latest. To avoid this, we need to abort the XHR using ts-req-strategy="last".