Skip to content

Commit 7960d34

Browse files
WillianAgostiniWillianAgostini
authored
feat(types): extend AxiosResponse interface to include custom headers type (#6782)
1 parent aa78ac2 commit 7960d34

File tree

4 files changed

+107
-4
lines changed

4 files changed

+107
-4
lines changed

‎index.d.cts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -461,11 +461,11 @@ declare namespace axios {
461461
headers?: RawAxiosRequestHeaders | AxiosHeaders | Partial<HeadersDefaults>;
462462
}
463463

464-
interface AxiosResponse<T = any, D = any> {
464+
interface AxiosResponse<T = any, D = any, H = {}> {
465465
data: T;
466466
status: number;
467467
statusText: string;
468-
headers: RawAxiosResponseHeaders | AxiosResponseHeaders;
468+
headers: H & RawAxiosResponseHeaders | AxiosResponseHeaders;
469469
config: InternalAxiosRequestConfig<D>;
470470
request?: any;
471471
}

‎index.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -393,11 +393,11 @@ export interface CreateAxiosDefaults<D = any> extends Omit<AxiosRequestConfig<D>
393393
headers?: RawAxiosRequestHeaders | AxiosHeaders | Partial<HeadersDefaults>;
394394
}
395395

396-
export interface AxiosResponse<T = any, D = any> {
396+
export interface AxiosResponse<T = any, D = any, H = {}> {
397397
data: T;
398398
status: number;
399399
statusText: string;
400-
headers: RawAxiosResponseHeaders | AxiosResponseHeaders;
400+
headers: H & RawAxiosResponseHeaders | AxiosResponseHeaders;
401401
config: InternalAxiosRequestConfig<D>;
402402
request?: any;
403403
}

‎test/module/typings/cjs/index.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,10 @@ interface User {
115115
name: string;
116116
}
117117

118+
interface ResponseHeaders {
119+
'x-header': string;
120+
}
121+
118122
// with default axios.AxiosResponse<T> result
119123

120124
const handleUserResponse = (response: axios.AxiosResponse<User>) => {
@@ -162,6 +166,54 @@ axios.patch<User>('/user', { name: 'foo', id: 1 })
162166
.then(handleUserResponse)
163167
.catch(handleError);
164168

169+
170+
// with custom response headers axios.AxiosResponse<T, any, H> result
171+
172+
const handleUserResponseWithCustomHeaders = (response: axios.AxiosResponse<User, any, ResponseHeaders>) => {
173+
console.log(response.data.id);
174+
console.log(response.data.name);
175+
console.log(response.status);
176+
console.log(response.statusText);
177+
console.log(response.headers);
178+
console.log(response.config);
179+
};
180+
181+
axios.get<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user?id=12345')
182+
.then(handleUserResponseWithCustomHeaders)
183+
.catch(handleError);
184+
185+
axios.get<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user', { params: { id: 12345 } })
186+
.then(handleUserResponseWithCustomHeaders)
187+
.catch(handleError);
188+
189+
axios.head<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user')
190+
.then(handleUserResponseWithCustomHeaders)
191+
.catch(handleError);
192+
193+
axios.options<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user')
194+
.then(handleUserResponseWithCustomHeaders)
195+
.catch(handleError);
196+
197+
axios.delete<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user')
198+
.then(handleUserResponseWithCustomHeaders)
199+
.catch(handleError);
200+
201+
axios.post<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
202+
.then(handleUserResponseWithCustomHeaders)
203+
.catch(handleError);
204+
205+
axios.post<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 }, { headers: { 'X-FOO': 'bar' } })
206+
.then(handleUserResponseWithCustomHeaders)
207+
.catch(handleError);
208+
209+
axios.put<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
210+
.then(handleUserResponseWithCustomHeaders)
211+
.catch(handleError);
212+
213+
axios.patch<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
214+
.then(handleUserResponseWithCustomHeaders)
215+
.catch(handleError);
216+
165217
// (Typed methods) with custom response type
166218

167219
const handleStringResponse = (response: string) => {

‎test/module/typings/esm/index.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,10 @@ interface User {
137137
name: string;
138138
}
139139

140+
interface ResponseHeaders {
141+
'x-header': string;
142+
}
143+
140144
// with default AxiosResponse<T> result
141145

142146
const handleUserResponse = (response: AxiosResponse<User>) => {
@@ -184,6 +188,53 @@ axios.patch<User>('/user', { name: 'foo', id: 1 })
184188
.then(handleUserResponse)
185189
.catch(handleError);
186190

191+
// with custom response headers AxiosResponse<T, any, H> result
192+
193+
const handleUserResponseWithCustomHeaders = (response: AxiosResponse<User, any, ResponseHeaders>) => {
194+
console.log(response.data.id);
195+
console.log(response.data.name);
196+
console.log(response.status);
197+
console.log(response.statusText);
198+
console.log(response.headers);
199+
console.log(response.config);
200+
};
201+
202+
axios.get<User, AxiosResponse<User, any, ResponseHeaders>>('/user?id=12345')
203+
.then(handleUserResponseWithCustomHeaders)
204+
.catch(handleError);
205+
206+
axios.get<User, AxiosResponse<User, any, ResponseHeaders>>('/user', { params: { id: 12345 } })
207+
.then(handleUserResponseWithCustomHeaders)
208+
.catch(handleError);
209+
210+
axios.head<User, AxiosResponse<User, any, ResponseHeaders>>('/user')
211+
.then(handleUserResponseWithCustomHeaders)
212+
.catch(handleError);
213+
214+
axios.options<User, AxiosResponse<User, any, ResponseHeaders>>('/user')
215+
.then(handleUserResponseWithCustomHeaders)
216+
.catch(handleError);
217+
218+
axios.delete<User, AxiosResponse<User, any, ResponseHeaders>>('/user')
219+
.then(handleUserResponseWithCustomHeaders)
220+
.catch(handleError);
221+
222+
axios.post<User, AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
223+
.then(handleUserResponseWithCustomHeaders)
224+
.catch(handleError);
225+
226+
axios.post<User, AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 }, { headers: { 'X-FOO': 'bar' } })
227+
.then(handleUserResponseWithCustomHeaders)
228+
.catch(handleError);
229+
230+
axios.put<User, AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
231+
.then(handleUserResponseWithCustomHeaders)
232+
.catch(handleError);
233+
234+
axios.patch<User, AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
235+
.then(handleUserResponseWithCustomHeaders)
236+
.catch(handleError);
237+
187238
// (Typed methods) with custom response type
188239

189240
const handleStringResponse = (response: string) => {

0 commit comments

Comments
 (0)