VeeValidate async validators and AbortController: can external cancellation signals abort in-flight field validation?

Answer to the question

VeeValidate does not provide an AbortSignal to its validation pipeline. When a new validate call is made, the library simply awaits the promise returned by the validator and then discards the result if the value has changed. The original promise continues to run unless the validator itself implements cancellation.

Confirmed facts

• Async validators in VeeValidate must return a Promise that resolves to null (valid) or a string (error).
• On a subsequent validation, VeeValidate ignores the resolution of the previous promise but does not abort it.
• There is no built‑in AbortSignal parameter in the validator signature.
• If a validator rejects with an AbortError, VeeValidate treats it as a validation failure unless the error is caught and ignored.

Likely explanation

Because the validator receives only the field value (and an optional field object), it has no way to observe an external cancellation unless you create an AbortController inside the validator or in a surrounding closure. By keeping a reference to the controller you can abort the ongoing request when the component unmounts or when a new validation starts.

Practical pattern for this case

1. Store an AbortController on the field so it survives across validation calls.

   const validateUsername = (value, { field }) => {
     // Reuse or create a controller on the field
     if (!field.__vcController) field.__vcController = new AbortController();
     const controller = field.__vcController;
     // Abort any previous request
     controller.abort();
     // Create a fresh controller for this request
     const newController = new AbortController();
     field.__vcController = newController;
   
     return fetch(`/api/unique?name=${encodeURIComponent(value)}`, {
       signal: newController.signal
     })
       .then(res => res.json())
       .then(data => data.isUnique ? null : 'Username taken')
       .catch(err => {
         if (err.name === 'AbortError') return null; // ignore cancellation
         throw err; // propagate other errors
       });
   };
   

2. Abort any pending request when the component unmounts.

   import { onUnmounted } from 'vue';
   
   onUnmounted(() => {
     if (field.__vcController) field.__vcController.abort();
   });
   

3. Prevent race conditions: keep a numeric request ID or timestamp that is checked before updating the field state.

   let currentRequest = 0;
   const validate = async (value, { field }) => {
     const requestId = ++currentRequest;
     // ... perform fetch with AbortController
     return fetch(...)
       .then(...)
       .then(result => {
         if (requestId !== currentRequest) return null; // stale response
         return result;
       });
   };
   

What to ask next

If you are using a library other than fetch (e.g., Axios, GraphQL client, or a custom promise), let me know so the cancellation strategy can be adapted to that API’s abort support.

Diagram

Component	Action	Result
VeeValidate	Calls validator	Receives Promise
Validator	Starts fetch with AbortSignal	In‑flight request
AbortController	Abort signal sent	Fetch rejects with AbortError