Axios: 응답 인터셉터를 사용할 때 TypeScript와 함께 Axios를 사용하는 방법(AxiosResponse 문제)

axios.request<T>(...args) 스타일 정의를 사용합니다.
배열의 마지막 응답 인터셉터는 암시적으로 (currentResponse: any) => T 와 같은 인터페이스를 따릅니다.

따라서 data 가 다음과 같은 경우:

interface ServerResponse {
  data: ServerData
}

interface ServerData {
  foo: string
  bar: number
}

그러면 다음과 같이 말할 수 있습니다.

axios.request<ServerData>({
  url: 'https://example.com/path/to/data',
  transformResponse: (r: ServerResponse) => r.data
}).then((response) => {
  // `response` is of type `AxiosResponse<ServerData>`
  const { data } = response
  // `data` is of type ServerData, correctly inferred
})

@zcei ooh 실제로 이것은 axios.interceptors.response.use 와 같은 글로벌 인터셉터에서는 작동하지 않습니다.

내 생각에는 - 인터셉터는 현재 매우 "느슨한" 유형( any )이므로 응답 인터셉터를 연결하고 (r: any): any => r.data (기본적으로 엄격하지 않은 모드에서는 입력을 생략합니다.

axios.request 를 호출하는 지점에서만 일반으로 구성할 수 있으며, 그러면 data 속성의 유형으로 전달됩니다.

(실제로 위의 코드 스니펫에서 실수를 했습니다. data 는 실제로 AxiosResponse<ServerData> 이고 ServerData 유형의 $ .data 필드가 있습니다. - 업데이트했습니다)

@zcei 안녕하세요 죄송합니다만 이것은 제 예제에서는 작동하지 않습니다. 이 문제를 강조하기 위해 코드 샌드박스를 만들었습니다.

여기에서 확인하세요

동일한 문제가 있는 인터셉터는 본질적으로 다음과 같이 요약될 수 있습니다.

this.instance.interceptors.response.use(response => response.data);

그럼에도 불구하고 반환 유형

this.instance.post<string>(...);

AxiosPromise<string> 이며, 데이터가 래핑될 것으로 예상합니다.

이것은 의도적입니다. 인터셉터에서 데이터를 변환 해야 하지만 응답 키를 호이스트 해서는 안 됩니다.

https://github.com/axios/axios/blob/0b3db5d87a60a1ad8b0dce9669dbc10483ec33da/lib/core/dispatchRequest.js#L63 -L67

나는 당신이 다음과 같은 서버 응답을 가질 것이라고 생각했습니다.

{
  "data": {
    "foo": 42
  }
}

response.data.data 중첩을 없애고 싶었습니다. 인터셉터에서 response.data 를 반환하면 나중에 response.data.data.foo response.data.foo 를 통해 액세스할 수 있습니다.

그러나 response.foo 액세스는 작동하지 않습니다. 응답 코드 등과 같은 다른 항목을 추적하는 "루트" 응답 수준이기 때문입니다.

죄송하지만 적어도 기능적으로는 귀하의 전제에 동의하지 않습니다.
인터셉터를 사용하여 데이터 속성을 풀지 않고 다음을 수행해야 합니다.

this.instance.post<string>(...).then(response => response.data);
this.instance.get<number>(...).then(response => response.data);

내가 정의하는 _모든_ 끝점에서. 그 모든 코드 반복의 요점은 무엇입니까?

then 가 있는 요청이 성공할 때마다 응답 코드 등에 대해서는 별로 신경 쓰지 않습니다. 나는 무언가가 작동하지 않는 경우에만 응답 코드에 신경을 쓰며, 이것이 바로 오류 처리기가 있는 이유입니다. , 인터셉터와 특정 끝점 모두에서.

this.instance.interceptors.response.use(response => {
  // Everything went well, pass only relevant data through
  return response.data;
}, error => {
  // Something went wrong, figure out how to handle it here or in a `.catch` somewhere down the pipe
});

요청이 성공할 때마다, 즉 then이 있는 경우 응답 코드에 대해 별로 신경 쓰지 않습니다.

글쎄, 당신 은 다른 정보에 신경 쓰지 않을 수도 있지만, 당신이 오직 몸에만 신경을 쓰는 HTTP 클라이언트 를 사용하는 모든 사람에게 제한하는 것은 실제로 해결책이 아닙니다.
성공적인 호출에서도 상태 코드 및 헤더에 대한 합법적인 사용 사례가 충분합니다. 204 vs 200 , 속도 제한 헤더 확인, 추가 리소스(페이지 매김)에 대한 Link 헤더 추출 등 pp.

신경 쓰지 않는다면 Axios를 감싸고 모든 것을 버리십시오.

this.instance.request = <T>(...args) => {
  return axios.request<T>(...args).then(({ data }) => data)
}

this.instance.request<string>({ method: 'post', ... }).then(data => { ... });
this.instance.request<number>({ method: 'get', ... }).then(data => { ... });

하나의 프로젝트에서 내가 하는 방식대로 모든 사람이 일을 해야 한다는 개념을 어디서 얻었는지 모르겠습니다. 저는 단순히 모든 요청에 ​​대해 데이터를 자동으로 해제하는 방법에 대한 문제를 해결하려고 노력 중이며 이 문제가 저보다 먼저 발생했다는 점을 감안할 때 이 문제가 있는 유일한 사람은 아닙니다.

인터셉터는 이름과 readme의 설명(모든 응답에 대해 무언가를 수행)으로 올바른 장소를 좋아합니다. 204 대 200 등을 처리한 다음 데이터를 전달하는 것도 인터셉터에서 의미가 있습니다. 그러면 한 중앙에서 처리할 수 있기 때문입니다.

제 생각에 직관적인 솔루션은 라이브러리가 한 방향으로 가지 않도록 인터셉터에서 원하는 것을 반환하는 것입니다.

데이터의 일부 필드를 변환하려는 경우:

this.instance.interceptors.response.use(response => {
  response.data.foo = JSON.parse(response.data.bar);
  return response;
});

Axios의 데이터를 풀고 싶다면:

this.instance.interceptors.response.use(response => response.data);

이것은 개발자에게 무엇을 할 것인지에 대한 선택권을 남길 것입니다. 제 생각에는 이것이 매우 독단적인 인터셉터보다 낫습니다. 물론 동의하지 않으셔도 됩니다.

당신은 "모든 코드 반복의 요점"에 대해 추론하고 있었기 때문에 정보가 필요한 이유를 설명하려고했습니다.

인터셉터가 공통 구조 없이 전체 응답을 뒤섞을 수 있는 경우 인터셉터와 응답에서 유형 안전을 유지하는 방법에 대한 방법을 실제로 찾을 수 없습니다. :/
요청에 대한 응답 유형은 any 가 되어야 하며 개발자가 올바른 작업을 수행할 수 있도록 노력해야 합니다.

나에게 그것은 하나의 속성에 액세스하는 것보다 편안한 타이핑으로 인해 오류가 발생하기 쉬운 것처럼 들립니다.

"80% 사용 사례"에 대한 유형 안전성을 유지하면서 인터셉터가 루트 응답을 덮어쓸 수 있도록 하는 PR을 생각해낼 수 있다면 더할 나위 없이 기쁠 것입니다!

문제는 내가 만든 위의 두 가지 예가 모두 이미 설명한 대로 작동한다는 것입니다. 기능적으로는 잘못된 유형일 뿐입니다. 인터셉터에서 (수정된) 응답이 아닌 다른 것을 반환하는 것이 잘못된 경우 거기에서 예상되는 유형을 업데이트하는 것이 좋습니다.

먼저 @Etheryte 와 같은 일을 하고 있다는 사실이 흥미롭습니다!

우리 앱에서 r => r.data 는 체인의 최종 응답 인터셉터이며 새로 고침 토큰 등을 처리하기 위해 상태 코드에 의존하는 다른 것들을 사용합니다. 전화.

TS에서 이 사용 사례를 수용하는 것이 불가능할 수도 있다는 점을 이해합니다. 그러나 @zcei Axios API(인터셉터)의 공식 부분을 사용하므로 이것이 Axios를 사용하는 합법적인 방법이라는 것은 부인할 수 없습니다.

도! 항상 잘못된 코드 🤦‍♂️를 보고 있었는데 인터셉터가 아니라 transformResponse 섹션에 있었습니다 - 정말 죄송합니다!

반환 유형을 변경하는 인터셉터를 설명하기 위해 입력을 어떻게 업데이트합니까?

아마도 이런 것?

interface AxiosInstance {
  request<T = any, R = AxiosResponse<T>> (config: AxiosRequestConfig): Promise<R>;
}

다음과 같이 부를 수 있습니다.

axios.request<User, string>({
  method: 'get',
  url: '/user?id=12345'
})
  .then((foo: string) => { // <-- you could leave out the type annotation here, it's inferred
    console.log(foo)
  })

방금 로컬에서 시도했고 원하는 작업을 수행하는 것 같습니다.
저녁에 함께 PR을 받아 모든 방법에 대해 업데이트할 수 있습니다.

@zcei 좋네요! 물론 AxiosResponse를 기본으로 하는 것은 99%의 경우에 의미가 있습니다 👍

듣기 좋은! 혼선을 드려 다시 한 번 죄송합니다 😓

@zcei 문제 없습니다! Axios의 출시 주기는 무엇입니까?

없습니다. 아직 v1 알파(#1333)에 대해 보류 중인 사항이 있으며 그 동안 @nickuraltsev / @emilyemorehouse 는 필요할 때마다 릴리스를 수행하고 있습니다.
v0.18 이후로 약간의 견인력이 있어(내가 가장 좋아하는: 인스턴스에 대한 범위 지정 옵션 포함) 릴리스를 중단할 수 있을 것 같습니다. 더 많은 정보를 원하시면 Gitter 로 여러분을 초대해 드리겠습니다.

0.19 릴리스가 나오길 바랐지만 마지막으로 확인한 결과 마스터가 CI에 실패했습니다. 1.0이 출시되면 더 확실하고 정기적인 릴리스 일정을 원합니다.

같은 문제를 만난다. 해결책이 있습니까?

@qidaneix 릴리스가 나올 때까지 npm install axios/axios#master 설치를 시도할 수 있습니다. #1605는 그것을 고쳤어야 했다. 테스트뿐만 아니라 실제 사용 사례에 실제로 도움이 되는지 여부에 대한 피드백을 받는 것이 좋습니다. 🙂

@zcei 내일 해봐야지

@zcei 언제 출시되는지 여쭤봐도 될까요?

1.0.0이 출시될 때 +1?

이것은 확실히 pre-1.0 릴리스가 될 것입니다. @Khaledgarbaya Matt가 NPM에도 추가했습니까? 그렇지 않으면 우리는 그것을 릴리스하는 나머지 유지 관리자에게 친절해야 합니다 😉

모두 안녕. 현재 NPM 릴리스를 관리하고 있습니다. 다른 1.0.0 이전 릴리스를 발표하고 싶지만 Travis 테스트가 실패하고 있으며 아직 수정할 기회가 없었습니다. 문제가 해결되면 즉시 배포할 수 있어 더욱 기쁩니다 😬

@zcei npm 저장소에 추가되지 않았으며 변경 사항을 병합할 수만 있습니다.

이 문제에 대한 업데이트가 있습니까? 가까운 장래에 2개월차와 같은 릴리스가 있습니까?

+1

❤️ 지금 출시된다면

알고 있지만 현재 차단되어 있습니다. 🙁 여기에서 더 많은 정보를 얻을 수 있습니다: https://github.com/axios/axios/issues/1657#issuecomment -410766031

0.19.0-beta.1의 일부로 출시되었습니다.

npm install [email protected] 또는 npm install axios@next 를 사용하여 설치할 수 있습니다.

아마도 이런 것?

interface AxiosInstance {
  request<T = any, R = AxiosResponse<T>> (config: AxiosRequestConfig): Promise<R>;
}

다음과 같이 부를 수 있습니다.

axios.request<User, string>({
  method: 'get',
  url: '/user?id=12345'
})
  .then((foo: string) => { // <-- you could leave out the type annotation here, it's inferred
    console.log(foo)
  })

방금 로컬에서 시도했고 원하는 작업을 수행하는 것 같습니다.
저녁에 함께 PR을 받아 모든 방법에 대해 업데이트할 수 있습니다.

User(T, 첫 번째 일반 매개변수)가 사용되지 않는 것 같습니다. 사용자 정의 반환 유형을 사용하려는 경우 이상하게 보입니다 😕

axios.request<void, string>({
    ...
})

void를 사용하는 것이 더 명확할 수 있습니다.

@emilyemorehouse 감사하지 않게 들리지만 0.19-베타가 3개월 동안 공개되었습니다. GA 릴리스에 대한 ETA가 있습니까? 우리 프로젝트에는 이러한 수정 사항 중 하나가 필요한 문제가 있습니다. 나는 Gitter 채널에서 이것을 물었지만 유지 보수가 거기에서 응답하지 않는 것 같습니다 ...

릴리스 전에 해결해야 하는 문제는 무엇이며 추적할 수 있는 장소가 있다는 것이 더 나은 표현일 것입니다. 많은 관심이 있는 것 같으니 작업을 분산하고 필요한 작업을 명확하게 이해하면 작업 속도를 높이는 데 도움이 될 수 있습니다.

이미 0.19에 대한 프로젝트 마일스톤이 있지만 나열된 티켓은 몇 달 동안 변경 사항이 없습니다.

const func1: 모든 = () => { axios.request(...) 반환 }

내 axios.d.ts AxiosResponse 재정의:

import axios from 'axios'

declare module 'axios' {
  export interface AxiosResponse<T = any> extends Promise<T> {}
}

이 문제를 범하고 있습니다. 그것은 작동합니다 ... 방금 AxiosInstance 정의를 로컬 타이핑에 복사했을 때 알았지 만 구현 된 솔루션은 내 생각에 매우 장황합니다. (Typescript 전문가가 아님) 잘못된 일을하지 않는 한. axios.create 로 생성된 별도의 axios 인스턴스를 사용하고 이 인터셉터를 사용하기 때문에:

AxiosClient.interceptors.response.use(
  response => response && response.data,
  error => error && error.response && error.response.data
);

여기서 response.data 는 항상 다음 형식을 갖습니다.

export interface APIResponse<T = any> {
  data: T;
  message: string;
  status: boolean;
}

다음과 같이 AxiosClient.post 를 사용해야 하는 것 같습니다.

AxiosClient.post<EndpointAPIResponse, APIResponse<EndpointAPIResponse>>('/endpoint', { someData });

.then 에 적절한 유형을 갖습니다. 내가 여기에서 뭔가 잘못하고 있습니까, 아니면 정말 장황해야합니까? 그렇지 않은 경우 인스턴스를 생성할 때 예상되는 응답 스키마를 전달할 수 있다면 훨씬 좋을 것입니다. 하지만 작동하게 만들 수는 없습니다.

export interface AxiosInstance<R> {
  <T = any>(config: AxiosRequestConfig): Promise<R<T>>;
  <T = any>(url: string, config?: AxiosRequestConfig): Promise<R<T>>;
  defaults: AxiosRequestConfig;
  interceptors: {
    request: AxiosInterceptorManager<AxiosRequestConfig>;
    response: AxiosInterceptorManager<R>;
  };
  getUri(config?: AxiosRequestConfig): string;
  request<T = any>(config: AxiosRequestConfig): Promise<R<T>>;
  get<T = any>(url: string, config?: AxiosRequestConfig): Promise<R<T>>;
  delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<R<T>>;
  head<T = any>(url: string, config?: AxiosRequestConfig): Promise<R<T>>;
  post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R<T>>;
  put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R<T>>;
  patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R<T>>;
}

export interface AxiosStatic extends AxiosInstance<AxiosResponse> {
  create<T = AxiosResponse>(config?: AxiosRequestConfig): AxiosInstance<T>;
  Cancel: CancelStatic;
  CancelToken: CancelTokenStatic;
  isCancel(value: any): boolean;
  all<T>(values: (T | Promise<T>)[]): Promise<T[]>;
  spread<T, R>(callback: (...args: T[]) => R): (array: T[]) => R;
}

제네릭 유형이 없는 axios.create() 또는 axios 에서는 잘 작동하지만 다음과 같이 인터페이스를 전달하면 다음과 같이 됩니다.

const AxiosClient = axios.create<APIResponse>({
  // ...
});

그런 다음 다음과 같이 사용합니다. AxiosClient.post<string>('/endpoint').then(value => value.data) , value.data has type... T. 게다가 위의 버전은 실제로 node_modules에서 이러한 타이핑을 교체하는 경우에만 작동합니다. 그렇지 않으면 완전히 뒤섞이고 저는 총체적인 재난으로 끝납니다. 누구든지 이것으로 나를 도울 수 있습니까?

편집: 알겠습니다. 그런 식으로 제네릭을 사용할 수 없기 때문에 작동하지 않을 것 같습니다(R이 제네릭 유형일 때 R<T> 는 올바른 구문이 아니지만 어떤 이유로 WebStorm이 강조 표시되지 않은 것 같습니다. 그것은 나를 위해); https://github.com/Microsoft/TypeScript/issues/1213 이것이 해결될 것이라고 가정하지만 구현되는지 여부는 알 수 없습니다.

const request = <T>(options: AxiosRequestConfig) => {
    return axios.request<IResponse<T>>(options).then<T>(response => {
        const data = response.data;
        if (data.c !== '0') {
            return Promise.reject(new Error(data.m || 'error'));
        }
        return data.d;
    });
}

사용:

request<IApiGetBrandGoodsInfoByIds>({
        method: 'GET',
        url: '/api/a/b',
    });

@zcei 아직 해결되지 않았나요? 다음 작업을 수행할 수 없습니다.

// so I created an axios instance:
const instance = axios.create(someOptions);

// then used interceptors
instance.interceptors.response.use((res) => res.data.data);   // server response will always have 'data'

// then when using the following to make a request
instance.get<string>(someURI);  // suppose server response was {data: 'some message'}

// ^^ the above returns type AxiosPromise<string>. How do I get it to return type Promise<string> instead?

같은 문제가 있어서 버전 0.19beta를 설치했습니다. 또한 올바른 유형을 구문 분석할 수 없습니다.

내 axios.d.ts AxiosResponse 재정의:

import axios from 'axios'

declare module 'axios' {
  export interface AxiosResponse<T = any> extends Promise<T> {}
}

오 니우피

저는 인터셉터를 사용하여 response => response.data 와 같은 작업을 수행합니다. 따라서 AxiosResponse 래퍼를 완전히 제거해야 합니다.

나는 마침내 다음과 같이 끝납니다.

import axios from 'axios'

declare module 'axios' {
  export interface AxiosInstance {
    request<T = any> (config: AxiosRequestConfig): Promise<T>;
    get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    head<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
    put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
    patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
  }
}

사용 방법을 모르는 사람이 있는 경우:

1. 유형을 어딘가에 작성하십시오(예: src/types/axios/axios.d.ts ) .
2. 예를 들어 tsconfig.json 을 업데이트하십시오.

{
  "compilerOptions": {
    "typeRoots": [
        "./node_modules/@types",
        "./src/types/",
    ]
  }
}

이것은 나를 위해 작동합니다.

Api.boards.createBoard = jest.fn((name:string) => {
      const mockBoardResult = {
        created_on: mockBoardData.date,
        name,
        threads: [],
        updated_on: mockBoardData.date,
        _id: mockBoardData._id
      };
      return Promise.resolve({data:mockBoardResult}) as Promise<AxiosResponse<any>>
    });

재정의하는 또 다른 방법

import * as axios from 'axios'

declare module 'axios' {
  interface AxiosInstance {
    (config: AxiosRequestConfig): Promise<any>
  }
}

인터셉터 를 사용할 때 AxiosResponse 에 속성을 추가해서는 안 된다고 생각합니다. 인터셉터를 꺼낼 수 있기 때문입니다.

// @axios-exts/add-foo-to-resp
declare module 'axios' {
  interface AxiosResponse<T = any> {
    foo: string
  }
}
const addFooToResp = (res: AxiosResponse) => {
  res.foo = 'bar'
  return res
}
export default addFooToResp

// Your Project
import axios from 'axios'
import addFooToResp from '@axios-exts/add-foo-to-resp'

var id = axios.interceptors.response.use(addFooToResp)

axios.get('xx').then(res => {
  // have type defined
  // because we use `declare module 'axios'` ts can infer type
  console.log(res.foo)
})

// but if then eject?
axios.interceptors.response.eject(id)
axios.get('xx').then(res => {
  // also have type defined, it's maybe not reasonable
  console.log(res.foo)
})

우리는 왜 typescript를 사용합니까? 우리 프로젝트가 안전하기를 바랍니다.
언젠가 우리가 기본 유틸리티에서 속성을 제거한다면, 우리는 그것을 참조하는 코드가 컴파일 타임에 오류를 생성하기를 원할 것입니다.

그래서 우리는 인터셉터 를 사용하여 AxiosResponse 에 속성을 추가하고 유형 유추를 갖고 싶습니다. 이는 인터셉터가 꺼질 때 유형 유추를 업데이트할 수 있는지 확인할 방법이 없기 때문에 모순됩니다.

axios가 사용자에게 다음과 같이 알려야 한다고 생각합니다.
인터셉터는 AxiosResponse 에 영향을 주지 않는 것을 처리해야 합니다. AxiosResponse 속성을 확장하고 유형 추론을 사용하려면 '플러그인'을 좋아해야 합니다.

// @axios-exts/add-foo-to-resp
declare module 'axios' {
  interface AxiosResponse<T = any> {
    foo: string
  }
}
const addFooToResp = (res: AxiosResponse) => {
  res.foo = 'bar'
  return res
}
export default (axios) => {
  axios.interceptors.response.use(addFooToResp)
}

// Your Project
import axios from 'axios'
import addFooToResp from '@axios-exts/add-foo-to-resp'

addFooToResp(axios)

100% 안전은 아니지만 그냥 axios.interceptors.response.use 사용하는것보다 안전합니다

그리고 저는 axios desgin 플러그인 시스템을 추천합니다. 이제 우리는 항상 다음과 같이 보입니다.

import axios from 'axios'
import wrapper from 'axios-cache-plugin'

let http = wrapper(axios, {
  maxCacheSize: 15
})
export default http

wrapper 와 같이 플러그인을 axios에 연결하는 데 사용합니다. 모든 플러그인에는 공통 규칙이 없으며 충분히 우아하지 않습니다. 나는 좋아해야한다고 생각한다

import axios from 'axios'
import axiosCache from 'axios-cache-plugin'

axios.use(axiosCache, {
  // some options
})
export axios

// axios-cache-plugin
export default (axios) => {}
// or
export default {
  install(axios){}
}
// like Vue.use for Vue.js

axios.request<T>(...args) 스타일 정의를 사용합니다.
배열의 마지막 응답 인터셉터는 암시적으로 (currentResponse: any) => T 와 같은 인터페이스를 따릅니다.

따라서 data 가 다음과 같은 경우:

interface ServerResponse {
  data: ServerData
}

interface ServerData {
  foo: string
  bar: number
}

그러면 다음과 같이 말할 수 있습니다.

axios.request<ServerData>({
  url: 'https://example.com/path/to/data',
  transformResponse: (r: ServerResponse) => r.data
}).then((response) => {
  // `response` is of type `AxiosResponse<ServerData>`
  const { data } = response
  // `data` is of type ServerData, correctly inferred
})

Pls는 tsx를 사용하여 Axios 요청에 헤더 및 구성을 추가하는 방법을 알려줄 수 있습니까?

@MoZiadAlhafez

declare module 'axios' {
  interface AxiosRequestConfig {
    useCache: boolean
  }
}

그러나 이것은 권장되지 않습니다

긴 이야기지만 #1605에서 해결된 것 같습니다. https://github.com/axios/axios/issues/1510#issuecomment -396894600을 참조하세요.

내가 뭔가를 잘못 이해했다면 여기를 참조하여 새 문제를 여는 것이 좋습니다. 감사 해요.