Obtaining Axios response header in a Typescript environment

Question

Obtaining Axios response header in a Typescript environment

I am currently working on a rest call that may return a header that I need to store. In order to do this, I have to first check if the header is present before storing it.

Here is how I approached it:

private getHeader(response: AxiosResponse) {
    if (response.headers.has('myheader')) {
      storeHeader(response.headers['myheader']);
    }
 }

However, when trying to execute response.headers.has, TypeScript gives me the following errors:

TS18049: 'response.headers.has' is possibly 'null' or 'undefined'.
TS2723: Cannot invoke an object which is possibly 'null' or 'undefined'.
TS2349: This expression is not callable. Not all constituents of type 'string | number | boolean | AxiosHeaders | string[] | ((header: string, matcher?: true | AxiosHeaderMatcher | undefined) => boolean)' are callable. Type 'string' has no call signatures.

typescript axios

Answer 1

Answer №1

The headers property in AxiosResponse is a combination of RawAxiosResponseHeaders or AxiosResponseHeaders, while AxiosResponseHeaders is a mix of RawAxiosResponseHeaders and AxiosHeaders.

Since the method has is part of the AxiosHeaders class, it's necessary to specify that response.headers should be limited to AxiosHeaders before using has. This can be achieved by checking if headers instanceof AxiosHeaders first.

const headers = response.headers
if (headers instanceof AxiosHeaders && headers.has('myheader')) {
    storeHeader(headers['myheader']);
}

Answer 2

The headers property in AxiosResponse is a combination of RawAxiosResponseHeaders or AxiosResponseHeaders, while AxiosResponseHeaders is a mix of RawAxiosResponseHeaders and AxiosHeaders.

Since the method has is part of the AxiosHeaders class, it's necessary to specify that response.headers should be limited to AxiosHeaders before using has. This can be achieved by checking if headers instanceof AxiosHeaders first.

const headers = response.headers
if (headers instanceof AxiosHeaders && headers.has('myheader')) {
    storeHeader(headers['myheader']);
}

Obtaining Axios response header in a Typescript environment

Answer №1

Similar questions

Can PassportLocalDocument and PaginateModel coexist within the same framework?

Utilizing Typescript for manipulation of Javascript objects

Exploring the possibilities of TypeScript/angularJS in HTTP GET requests

Move forward state using navigateByUrl in Angular

Having trouble getting the express router to function properly in your Node.js TypeScript project?

What is the best way to eliminate any extra spaces from a string using typescript?

What is the best method for showing the route on a ReactGoogleMap?

What is the reason behind Typescript flagging a potential undefined value when checking for array length using a greater than comparison but not with an

Analyze the information presented in an HTML table and determine the correct response in a Q&A quiz application

What is the reason for requiring that the value type in a map must be uniform?

Creating a unique custom pipe in Angular 5

Is there a way to verify if a user taps outside a component in react-native?

Can I integrate @types/pkg into my custom library to automatically have types included?

Showing canvas lines while dragging (using only plain JavaScript, with React.JS if needed)

When a button is clicked in (Angular), it will trigger the highlighting of another button as a result of a value being modified in an array. Want to know the

Updating Select Options Disabled/Enabled in Angular 2

Removing a value from a hashmap using Typescript - what is the best way to do it?

Setting a default value for NULL property in TypeScript

React Axios has an issue with handling empty responses from the server due

Browser encountering HTTP response that has been shorted extensively