Initializing the Abort Controller

To enable request cancellation in Axios, you first need to create an instance of the AbortController. This controller generates a signal object, wich you then pass to the Axios request configuration. This signal acts as a communication channel between your code and the in-flight request.

Here's how you can configure both GET and POST requests to be cancellable:

// Create a new AbortController instance
const requestController = new AbortController();

// Define the request configuration
const apiConfig = {
 params: requestParams, // URL parameters for GET requests
 headers: customHeaders,
 timeout: 5000, // Request timeout in milliseconds
 signal: requestController.signal, // Attach the controller's signal
 onUploadProgress: progressHandler, // Optional: handle upload progress
};

// Cancellable GET request
apiClient
 .get(apiUrl, apiConfig)
 .then((response) => {
   processResponse(response, resolvePromise, showLoading);
 })
 .catch((error) => {
   rejectPromise(error.message);
 });

// Cancellable POST request
apiClient
 .post(apiUrl, payload, apiConfig)
 .then((response) => {
   processResponse(response, resolvePromise, showLoading);
 })
 .catch((error) => {
   rejectPromise(error);
 });

Canceling the Request

When you need to cancel an ongoing request, simply call the abort() method on the AbortController instance. This action will trigger the request to be rejected with an AbortError. It's good practice to wrap this call in a try...catch block to handle any potential errors gracefully.

try {
 // This will cancel any request that was initiated with requestController.signal
 requestController.abort();
} catch (cancellationError) {
 console.error('Request cancellation failed:', cancellationError);
}

Canceling Multiple Parallel Requests

You can use a single AbortController instance to manage multiple requests. When you call abort() on this controller, all associated requests will be cancelled simultaneously. This is particularly useful for scenarios involving parallel requests.

To manage a new set of requests, you should create a fresh AbortController instance. This resets the cancellation state, allowing new requests to be initiated without being immediately aborted.

Handling Excepsions and Reusing Controllers

After a controller's abort() method is called, its signal.aborted property becomes true. If you attempt to use the same controller for a new request without resetting it, the new request will be cancelled immediately upon creation.

Since signal.aborted is a read-only property, you cannot reset it directly. The solution is to create a new AbortController instance and assign it to your controller variable. This effectively "resets" the cancellation state, allowing subsequent requests to proceed normally.

// After aborting a request, create a new controller to reset the state
requestController = new AbortController();

Key Takeaways

• AbortController is the core mechanism for cancelling Axios requests.
• The controller's signal must be included in the Axios request configuration.
• Calling abort() on the controller instance will cancel the associated request(s).
• A single controller can be used to cancel multiple parallel requests.
• After an abort, you must create a new AbortController instance to initiate new, uncanceled requests.