Axios

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

모든 기본값이 설정되도록 보장하려면 axios_utils에서 Axios를 import해야 합니다. Axios를 직접 사용하지 마세요.

CSRF 토큰

모든 요청에는 CSRF 토큰이 필요합니다. 이 토큰이 설정되도록 보장하려면 Axios를 import하여 토큰을 설정하고 axios를 export합니다.

직접적으로 Axios를 사용하는 대신 이 export된 모듈을 사용하여 토큰이 설정되도록 해야 합니다.

사용법 

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

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

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

테스트에서 Axios 응답을 모의하도록 설정

응답을 모의(Mock)하기 위해 우리는 axios-mock-adapter를 사용하고 있습니다.

spyOn()보다 우리에게 제공하는 장점:

  • 응답 객체를 생성할 필요가 없음
  • call through(통화)를 허용하지 않음(피하려는 것)
  • 오류 케이스를 테스트하기 위한 명확한 API
  • 다른 응답을 허용하기 위해 replyOnce()를 제공

또한 Axios 인터셉터(Axios interceptors)를 사용하지 않기로 결정했습니다. 그들은 모의(mocking)에 적합하지 않기 때문입니다.

예시 

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

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

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

Axios를 사용하여 테스트에서 폴링 요청 모의(mock)하기

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

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