Axios: how to cancel request inside request interceptor properly?

Question

I want to cancel the request if there's no token, so I do like this:

instance.interceptors.request.use(config => {
  if (!getToken()) {
    console.log("interceptors: no access token");
  } else {
    config.headers.Authorization = "Bearer " + getToken().accessToken;
    return config;
  }
});

But in negative scenario there's an error TypeError: Cannot read property 'cancelToken' of undefined.

score 26 · Accepted Answer · answered Jun 15 '18 at 15:24

26

You cannot use the token inside the interceptors but instead throw Cancel

axios.interceptors.response.use(function (response) {
  throw new axios.Cancel('Operation canceled by the user.');
}, function (error) {
  return Promise.reject(error);
});

Refer to this post: https://github.com/axios/axios/issues/583

answered Jun 15 '18 at 15:24

grane2212

764
1
10
29

2

Will it cause `function (error) {...}` code branch runs or falls into `.catch()` later only? – TotalAMD Jun 17 '18 at 09:04
3

I am guessing you meant where will the code flow when you throw the `axios.Cancel()`. I have tried this, and the cancel will appear as an error in the `catch()` later directly. – grane2212 Jun 18 '18 at 14:31
This is incorrect as of writing (that you cannot use cancel token's inside an interceptor) and doesn't handle all use cases, such as if a request has already started and you now need to cancel all requests (e.g. the user has been logged out due to session expiry). For this see vijay's solution. – fredrivett Mar 17 '20 at 16:41
13

the OP asked for a solution in a request interceptor – tar Dec 18 '20 at 21:16
But it seems like Cancel method does not exist on Axios instance strangely. How can be this achieved if we are using interceptor on Axios instance? – Abhinandan Khilari Jul 06 '21 at 14:20

Kirill Taletski · Answer 2 · 2022-12-12T19:56:29.487

Axios `v0.22.0` and higher

As per the documentation, cancellation is now pretty straightforward with the AbortController class

instance.interceptors.request.use(config => {
  /* some logic */
  const controller = new AbortController();

  if (needToCancelRequest) {
    controller.abort();
  }

  return {
    ...config,
    signal: controller.signal
  };
});

Browser Compatibility

You might be tempted to do a pretty concise signal: AbortSignal.abort() instead. Please, note that it is much less supported than the solution above. See AbortSignal.abort() vs new AbortController().abort() compatibility.

Axios before `v0.22.0`

This is a solution taken from the axios issue on github

instance.interceptors.request.use(config => {
  /* some logic */
  return {
    ...config,
    cancelToken: new CancelToken((cancel) => {
      if (needToCancelRequest) {
       cancel('Cancel repeated request')
      }
    })
  };
});

Note this is [deprecated](https://axios-http.com/docs/cancellation) as of axios v0.22 and suggests use of the `AbortController` — boycy, Dec 09 '21 at 17:21
This answer is correct, but CancelToken is deprecated. Use an abort controller instead, [using AbortSignal as shown in this updated answer](https://stackoverflow.com/a/71382464/3670756) — MarkWPiper, Mar 07 '22 at 14:24

Thomas Valadez · Answer 3 · 2022-09-29T03:46:05.490

8

So for whatever reason none of these answers worked for me. Here is what did.

axiosInstance.interceptors.request.use(
  function (config) {
    const controller = new AbortController();
    const cfg = {
      ...config,
      signal: controller.signal,
    };
    controller.abort('We gotta cancel this');
    return cfg;
  },
  function (error) {
    return Promise.reject(error);
  },
);

Thing I learned from this: AbortController is native to javascript/node.

edited Sep 29 '22 at 03:46

answered Apr 25 '22 at 21:13

Thomas Valadez

1,697
2
22
27

controller.abort doesn't expect any argument by the way but it's the right way to do it – Danny Apr 26 '22 at 09:47
1

Here is the TS definition for the `abort` method `(method) AbortController.abort(reason?: any): void (+1 overload)` – Thomas Valadez Apr 27 '22 at 03:21

score 4 · Answer 4 · answered Oct 06 '20 at 14:50

I have implemented this in this way. I am not sure if this is the best solution, but for my use case is useful. My idea is not to cancel the last request. I would like to cancel previous requests to the same endpoint, and let the last one to do his job. For that reason I keep track of the request that are being executed.

// I keep track of the current requests that are being executed
const currentExecutingRequests = {};

axios.interceptors.request.use(
    (req) => {
        let originalRequest = req;

        if (currentExecutingRequests[req.url]) {
            const source = currentExecutingRequests[req.url];
            delete currentExecutingRequests[req.url];
            source.cancel();
        }

        const CancelToken = axios.CancelToken;
        const source = CancelToken.source();
        originalRequest.cancelToken = source.token;
        currentExecutingRequests[req.url] = source;

        // here you could add the authorization header to the request

        return originalRequest;
    },
    (err) => {
        return Promise.reject(err);
    }
);

axios.interceptors.response.use(
    (response) => {
        if (currentExecutingRequests[response.request.responseURL]) {
            // here you clean the request
            delete currentExecutingRequests[response.request.responseURL];
        }
        return response;
    },
    (error) => {
        const { config, response } = error;
        const originalRequest = config;

        if (axios.isCancel(error)) {
            // here you check if this is a cancelled request to drop it silently (without error)
            return new Promise(() => {});
        }

        if (currentExecutingRequests[originalRequest.url]) {
            // here you clean the request
            delete currentExecutingRequests[originalRequest.url];
        }

        // here you could check expired token and refresh it if necessary

        return Promise.reject(error);
    }
);

Can you also show how to clean up the canceled request in useEffect? — Zeeshan, Jun 05 '21 at 01:43
Do you mean somenthing like this? `React.useEffect(() => { const CancelToken = axios.CancelToken; const source = CancelToken.source(); (async () => { try { const response = await axios.get(URL, { cancelToken: source.token }); console.log(response); } catch (e) { console.log(e); } })(); return () => source.cancel(); }, []);` You can see it here for more clarification: https://codesandbox.io/s/cancelling-request-in-useeffect-axios-q9cze — Luciano Corniglione, Jun 10 '21 at 14:23

score 4 · Answer 5 · answered Mar 07 '22 at 14:17

4

As of Axios v0.22.0 an AbortSignal is the recommended way to cancel from a request interceptor.

axios.interceptors.request.use(
  (requestConfig) => {
      /* some logic */
      return {
        ...requestConfig,
        signal: AbortSignal.abort()
      };
    }
  },
  (error) => {
    return Promise.reject(error);
  }
);

answered Mar 07 '22 at 14:17

MarkWPiper

863
8
6

1

For me this doesn't work: 1. AbortSignal must be newed up 2. AbortSignal doesn't have an `abort` function. – user2079828 Jun 29 '22 at 22:18
Looks like current approach is to use `AbortController`, which has slightly different syntax: https://axios-http.com/docs/cancellation – peteorpeter Aug 31 '22 at 12:39
This is the most concise answer so far. Yet it looks like the [`AbortSignal.abort()`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/abort#browser_compatibility) is __much less supported__ than the `const controller = new AbortController()` -> [`controller.abort()`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort#browser_compatibility) sequence. – Kirill Taletski Dec 12 '22 at 19:46

score 3 · Answer 6 · answered May 03 '21 at 03:22

3

@Kirill Taletski's answer solve this perfectly, but add one line:

const CancelToken = Axios.CancelToken;

then ,it gonna be like this :

instance.interceptors.request.use(config => {
  /* some logic */
  const CancelToken = Axios.CancelToken;
  return {
    ...config,
    cancelToken: new CancelToken((cancel) => cancel('Cancel repeated request'))
  };
});

answered May 03 '21 at 03:22

jaycethanks

55
6

should be a comment – igorsantos07 Jul 02 '21 at 18:24

score 2 · Answer 7 · answered Dec 06 '19 at 06:48

2

here is the solution

import axios from 'axios';

const CancelToken = axios.CancelToken;
let cancel;

axios.interceptors.request.use((config) => {

  if (cancel) {
    cancel(); // cancel request
  }

  config.cancelToken =  new CancelToken(function executor(c)
    {
      cancel = c;
    })

  return config

}, function (error) {
  return Promise.reject(error)
});

answered Dec 06 '19 at 06:48

Vijay sadhu

500
4
11

2

I think this is about cancelling a request already running, OP was talking about a not yet started – Pierre de LESPINAY Oct 19 '20 at 08:42
1

What is `let cancel`? And why you're checking if it's true then calling it! I'm confused. – Dipzera Jan 06 '21 at 10:33

score 1 · Answer 8 · answered Feb 26 '21 at 11:30

My solution based on https://stackoverflow.com/a/64228288/2051938

axios.ts

const axiosInstance = axios.create({ baseURL: apiBaseUrl });

axiosInstance.interceptors.request.use(
    req => {
        const originalRequest = req;
        const cancelUniqId = (originalRequest.cancelToken as unknown) as string;

        if (Object.hasOwnProperty.call(currentExecutingRequests, cancelUniqId)) {
            const source = currentExecutingRequests[cancelUniqId];
            delete currentExecutingRequests[cancelUniqId];
            source.cancel();
        }

        if (cancelUniqId) {
            const CancelToken = axios.CancelToken;
            const source = CancelToken.source();
            originalRequest.cancelToken = source.token;
            currentExecutingRequests[cancelUniqId] = source;
        }

        return originalRequest;
    },
    err => {
        return Promise.reject(err);
    }
);

axiosInstance.interceptors.response.use(
    response => {
        for (const key of Object.keys(currentExecutingRequests)) {
            if (currentExecutingRequests[key].token === response.config.cancelToken) {
                delete currentExecutingRequests[key];
                break;
            }
        }
        return response;
    },
    error => {
        const { response } = error;

        if (axios.isCancel(error)) {
            return new Promise(() => {
                //
            });
        }

        for (const key of Object.keys(currentExecutingRequests)) {
            if (currentExecutingRequests[key].token === response.config.cancelToken) {
                delete currentExecutingRequests[key];
                break;
            }
        }

        return Promise.reject(error);
    }
);

export { axiosInstance };

Usage:

axiosInstance.request({
    url: "some/req/path",
    method: "POST",
    params: {...},
    data: {...},
    cancelToken: "someUniqRequestID" // <-- IMPORTANT!
})

as a result, all requests with someUniqRequestID token will be cancelled when previous request with SAME cancelToken was not finished before.

score 1 · Answer 9 · answered Aug 04 '22 at 19:50

This works for me for axios 0.20.0:

const interceptorRequestConfig = (config) => {
    if (sourceRequest[config.url]) {
        sourceRequest[config.url].cancel('Automatic cancellation')
    }

    const axiosSource = axios.CancelToken.source()
    sourceRequest[config.url] = { cancel: axiosSource.cancel }
    config.cancelToken = axiosSource.token

    return config
}

credit for the idea: https://stackoverflow.com/a/66701130/8840359

CancelToken is deprecated – Thanveer Shah Sep 05 '22 at 07:45 — Thanveer Shah, Sep 05 '22 at 07:45

Axios: how to cancel request inside request interceptor properly?

9 Answers9

Axios `v0.22.0` and higher

Browser Compatibility

Axios before `v0.22.0`

Linked

Axios: how to cancel request inside request interceptor properly?

9 Answers9

Axios v0.22.0 and higher

Browser Compatibility

Axios before v0.22.0

Linked

Axios `v0.22.0` and higher

Axios before `v0.22.0`