question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Typescript definitions for AxiosInterceptorOptions included in response interceptors

See original GitHub issue

Describe the bug

With Axios 1.x we introduced an optional third argument for our interceptor use function. When I looked at the source code, I realized this third param of type AxiosInterceptorOptions is only used for request interceptor.
The issue I’m reporting is related to the typescript definition for the use method. Currently, when it comes to this third parameter, type definitions don’t distinguish between request and response interceptors. Because of this currently, this third argument can be used on the response interceptor as well without typescript yelling at you. This is misguiding for our consumers as they may end up using runWhen on response interceptors which won’t do anything.

To Reproduce

In a typescript project try writing the below code

Axios.interceptors.response.use((response) => response.data, undefined, {
  runWhen: (config) => config.method === 'GET',
});

Here users will expect that their response interceptor should only be fired when the request has the GET method, but in reality, this third argument would have no effect on the response interceptor.

Expected behavior

Typescript should report an error when using this third argument with a response interceptor.

Solution

This can be easily achieved by replacing the following type definition

export interface AxiosInterceptorManager<V> {
  use(onFulfilled?: (value: V) => V | Promise<V>, onRejected?: (error: any) => any, options?: AxiosInterceptorOptions): number;
  eject(id: number): void;
  clear(): void;
}

with the one mentioned below

type AxiosRequestInterceptorUse<T> = (onFulfilled?: (value: T) => T | Promise<T>, onRejected?: (error: any) => any, options?: AxiosInterceptorOptions) => number;

type AxiosResponseInterceptorUse<T> = (onFulfilled?: (value: T) => T | Promise<T>, onRejected?: (error: any) => any) => number;

export interface AxiosInterceptorManager<V> {
  use: V extends AxiosRequestConfig ? AxiosRequestInterceptorUse<V> : AxiosResponseInterceptorUse<V>;
  eject(id: number): void;
  clear(): void;
}

I can push my changes in a PR the moment you guys are on board with this.

Alternate Path

We may also consider incorporating features like runWhen for response interceptors as well. This is one of my 2 suggestions on Ability to skip request/response interceptors on per request basis. I already created a PR for another type issue with use method. But I’ve created this issue separately because we can go for implementing these for response interceptors as well.

Environment

  • Axios Version [e.g. 1.1.2]
  • Adapter [e.g. XHR/HTTP]

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:2
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
jasonsaaymancommented, Oct 14, 2022

Will have a look as soon as possible. I just presumed that <any> should take care of all types however I see what you said on your PR so I will test it out

0reactions
amitsainiicommented, Dec 9, 2022

Aren’t there plans for adding such runWhen option to response interceptors too? I would use this feature on project to parse server response with response interceptor based on responseType === ‘blob’, while other response interceptor can still work with json.

@ForeshadowRU I did start a discussion in the same direction. If @jasonsaayman agrees, I can even PR that feature myself 👍

Read more comments on GitHub >

github_iconTop Results From Across the Web

Typing Axios interceptor (axios.create) response typescript ...
I know that promises can return errors in both the .then and the .catch , but why can't I get TS to figure...
Read more >
axios adding interceptors Code Example - Code Grepper
Add a response interceptor HTTP.interceptors.response.use(function (response) { return response }, function(error) { if (error.response.status === 401) ...
Read more >
Setting up Axios Interceptors (React.js + TypeScript)
On this file I created the functions that I want in case a request, request error, response and response error. I exported a...
Read more >
axios - npm
Promise based HTTP client for the browser and node.js. Latest version: 1.2.0, last published: 12 days ago. Start using axios in your project ......
Read more >
How to Implement Request Retry Using Axios
A tutorial on how to use the interceptor and adapter provided by Axios ... Response interceptor: The role of this type of interceptor...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found