mirror of
https://github.com/axios/axios.git
synced 2026-04-11 14:21:59 +08:00
feat(types): extend AxiosResponse interface to include custom headers type (#6782)
This commit is contained in:
parent
aa78ac23fc
commit
7960d34ede
@ -461,11 +461,11 @@ declare namespace axios {
|
||||
headers?: RawAxiosRequestHeaders | AxiosHeaders | Partial<HeadersDefaults>;
|
||||
}
|
||||
|
||||
interface AxiosResponse<T = any, D = any> {
|
||||
interface AxiosResponse<T = any, D = any, H = {}> {
|
||||
data: T;
|
||||
status: number;
|
||||
statusText: string;
|
||||
headers: RawAxiosResponseHeaders | AxiosResponseHeaders;
|
||||
headers: H & RawAxiosResponseHeaders | AxiosResponseHeaders;
|
||||
config: InternalAxiosRequestConfig<D>;
|
||||
request?: any;
|
||||
}
|
||||
|
||||
4
index.d.ts
vendored
4
index.d.ts
vendored
@ -393,11 +393,11 @@ export interface CreateAxiosDefaults<D = any> extends Omit<AxiosRequestConfig<D>
|
||||
headers?: RawAxiosRequestHeaders | AxiosHeaders | Partial<HeadersDefaults>;
|
||||
}
|
||||
|
||||
export interface AxiosResponse<T = any, D = any> {
|
||||
export interface AxiosResponse<T = any, D = any, H = {}> {
|
||||
data: T;
|
||||
status: number;
|
||||
statusText: string;
|
||||
headers: RawAxiosResponseHeaders | AxiosResponseHeaders;
|
||||
headers: H & RawAxiosResponseHeaders | AxiosResponseHeaders;
|
||||
config: InternalAxiosRequestConfig<D>;
|
||||
request?: any;
|
||||
}
|
||||
|
||||
@ -115,6 +115,10 @@ interface User {
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface ResponseHeaders {
|
||||
'x-header': string;
|
||||
}
|
||||
|
||||
// with default axios.AxiosResponse<T> result
|
||||
|
||||
const handleUserResponse = (response: axios.AxiosResponse<User>) => {
|
||||
@ -162,6 +166,54 @@ axios.patch<User>('/user', { name: 'foo', id: 1 })
|
||||
.then(handleUserResponse)
|
||||
.catch(handleError);
|
||||
|
||||
|
||||
// with custom response headers axios.AxiosResponse<T, any, H> result
|
||||
|
||||
const handleUserResponseWithCustomHeaders = (response: axios.AxiosResponse<User, any, ResponseHeaders>) => {
|
||||
console.log(response.data.id);
|
||||
console.log(response.data.name);
|
||||
console.log(response.status);
|
||||
console.log(response.statusText);
|
||||
console.log(response.headers);
|
||||
console.log(response.config);
|
||||
};
|
||||
|
||||
axios.get<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user?id=12345')
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
axios.get<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user', { params: { id: 12345 } })
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
axios.head<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user')
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
axios.options<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user')
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
axios.delete<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user')
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
axios.post<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
axios.post<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 }, { headers: { 'X-FOO': 'bar' } })
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
axios.put<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
axios.patch<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
// (Typed methods) with custom response type
|
||||
|
||||
const handleStringResponse = (response: string) => {
|
||||
|
||||
@ -137,6 +137,10 @@ interface User {
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface ResponseHeaders {
|
||||
'x-header': string;
|
||||
}
|
||||
|
||||
// with default AxiosResponse<T> result
|
||||
|
||||
const handleUserResponse = (response: AxiosResponse<User>) => {
|
||||
@ -184,6 +188,53 @@ axios.patch<User>('/user', { name: 'foo', id: 1 })
|
||||
.then(handleUserResponse)
|
||||
.catch(handleError);
|
||||
|
||||
// with custom response headers AxiosResponse<T, any, H> result
|
||||
|
||||
const handleUserResponseWithCustomHeaders = (response: AxiosResponse<User, any, ResponseHeaders>) => {
|
||||
console.log(response.data.id);
|
||||
console.log(response.data.name);
|
||||
console.log(response.status);
|
||||
console.log(response.statusText);
|
||||
console.log(response.headers);
|
||||
console.log(response.config);
|
||||
};
|
||||
|
||||
axios.get<User, AxiosResponse<User, any, ResponseHeaders>>('/user?id=12345')
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
axios.get<User, AxiosResponse<User, any, ResponseHeaders>>('/user', { params: { id: 12345 } })
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
axios.head<User, AxiosResponse<User, any, ResponseHeaders>>('/user')
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
axios.options<User, AxiosResponse<User, any, ResponseHeaders>>('/user')
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
axios.delete<User, AxiosResponse<User, any, ResponseHeaders>>('/user')
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
axios.post<User, AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
axios.post<User, AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 }, { headers: { 'X-FOO': 'bar' } })
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
axios.put<User, AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
axios.patch<User, AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
|
||||
.then(handleUserResponseWithCustomHeaders)
|
||||
.catch(handleError);
|
||||
|
||||
// (Typed methods) with custom response type
|
||||
|
||||
const handleStringResponse = (response: string) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user