Axios

GitLab 프론트엔드 코드베이스에서 REST API 통신에 사용되는 Axios의 설정, CSRF 토큰 처리, 사용법 및 테스트에서의 모킹 방법을 설명합니다.

코드베이스의 일부 구형 영역에서 REST API를 사용할 때 서버와 통신하기 위해 Axios 를 사용했지만, 새 애플리케이션에서는 Axios를 사용하지 않아야 합니다. 대신 GraphQL API를 쿼리하기 위해 apollo-client 를 사용하세요. 자세한 내용은 GraphQL 문서 를 참조하세요. 모든 기본값이 설정되도록 보장하려면 axios_utils 에서 Axios를 임포트해야 합니다. Axios를 직접 사용하지 마세요. CSRF 토큰 # 모든 요청에는 CSRF 토큰이 필요합니다. 이 토큰이 설정되도록 보장하기 위해 Axios 를 임포트하고, 토큰을 설정한 후 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 인터셉터 는 모킹에 적합하지 않아 사용하지 않기로 결정했습니다. 예시 # import axios from '~/lib/utils/axios_utils'; import MockAdapter from 'axios-mock-adapter'; let mock; beforeEach(() => { // 기본 인스턴스에 모크 어댑터를 설정합니다 mock = new MockAdapter(axios); // /users에 대한 모든 GET 요청을 모킹합니다 // reply의 인수는 (status, data, headers)입니다 mock.onGet('/users').reply(200, { users: [ { id: 1, name: 'John Smith' } ] }); }); afterEach(() => { mock.restore(); }); 테스트에서 Axios를 사용한 폴링 요청 모킹 # 폴링 함수는 헤더 객체를 필요로 하기 때문에, 항상 세 번째 인수로 객체를 포함해야 합니다: mock.onGet('/users').reply(200, { foo: 'bar' }, {});