Axios

우리 코드베이스의 이전 부분에서 REST API를 사용할 때, 서버와 통신하기 위해 Axios를 사용했지만, 새로운 애플리케이션에서는 Axios를 사용하지 말아야 합니다. 대신에 apollo-client를 사용하여 GraphQL API를 쿼리하세요. 자세한 내용은 GraphQL 문서를 참조하세요.

모든 기본값이 설정되도록 보장하려면 Axios를 axios_utils에서 가져와야 합니다. Axios를 직접 사용하지 마십시오.

CSRF 토큰

모든 요청에는 CSRF 토큰이 필요합니다. 이 토큰이 설정되도록 하려면 Axios를 가져와 토큰을 설정한 후 axios를 내보내야 합니다.

이 내보낸 모듈을 직접 사용하는 대신에 토큰이 설정되도록 하기 위해 사용해야 합니다.

사용법 

import axios from './lib/utils/axios_utils';

axios.get(url)
  .then((response) => {
    // 서버에서 제공된 응답 데이터인 `data`입니다.
    const data = response.data;

    // 서버가 응답한 헤더인 `headers`입니다.
    // 모든 헤더 이름은 소문자로 변환됩니다.
    const paginationData = response.headers;
  })
  .catch(() => {
    // 에러 처리
  });

테스트에서 Axios 응답 모의

응답을 모의하기 위해 axios-mock-adapter를 사용합니다.

spyOn()보다 우수한 점:

  • 응답 객체를 만들 필요가 없음
  • 호출 허용(call through)을 허용하지 않음(피해야 하는 것)
  • 오류 케이스를 테스트하기 위한 명확한 API 제공
  • 다른 응답을 허용하기 위해 replyOnce()를 제공

또한 Axios interceptors를 사용하지 않기로 결정했습니다. 이는 모의에 적합하지 않기 때문입니다.

예시 

import axios from '~/lib/utils/axios_utils';
import MockAdapter from 'axios-mock-adapter';

let mock;
beforeEach(() => {
  // 이 코드는 기본 인스턴스에 모의 어댑터를 설정합니다.
  mock = new MockAdapter(axios);
  // /users로 모든 GET 요청을 모의합니다.
  // reply에 대한 인수는 (상태, 데이터, 헤더)입니다.
  mock.onGet('/users').reply(200, {
    users: [
      { id: 1, name: 'John Smith' }
    ]
  });
});

afterEach(() => {
  mock.restore();
});

Axios를 사용한 테스트에서 폴링 요청 모의

폴링 함수는 헤더 객체가 필요하기 때문에, 항상 세 번째 인수로 객체를 포함해야 합니다: 

mock.onGet('/users').reply(200, { foo: 'bar' }, {});