Axios관련 더 알아보기

Axios 인스턴스

//만들기
axios.create([config])

//예시
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

 

 

Axios 인터셉터

then과 catch로 처리되기 전에 요청과 응답을 가로챌수 있습니다.

axios.interceptors.request.use(function (config) {
	//요청이 전달되기 전에 작업 수행
    return config;
}, function (error) {
	//요청 오류가 있는 작업 수행
    return Promise.reject(error);
});

//응답 인터셉터 추가하기
axios.interceptors.response.use(function (response) {
    // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 데이터가 있는 작업 수행
    return response;
  }, function (error) {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 오류가 있는 작업 수행
    return Promise.reject(error);
  });

 

 

 

Axios와 Fetch

Axios	Fetch
써드파티 패키지로 설치가 쉽습니다. npm install axios, yarn add axios	Built-in APIs로 별도의 설치 필요없이, 모던 브라우저에서 사용 가능합니다.
wide browser 지원	오직 크롬 42+, firefox 39+, edge 14+, safari 10.1+ 지원. polyfill 이용해서 하위 호환성 지원 가능
XSRF Protection 보안 기능 제공	없음.
자동 JSON 데이터 변환 지원	JSON 데이터 핸들링 위해 추가 절차 필요. Fetch interface 의 json() 이용하는 로직 추가하여 가능
Request 취소 와 Request Timeout 설정 가능	없음. AbortController 이용하여 구현 가능
HTTP Requests 의 Intercept 가능	Intercept Requests 기본적으로 제공되지 않음. Global Fetch Method를 Overwrite 하여 나의 인터셉터 정의 가능
Download Progress 지원	Upload Progress 지원안함.  Response Object의 Body Property 통해 제공되는 ReadableStream 인스턴스 이용 가능

 

HTTP

https://sanghaklee.tistory.com/61

REST API 관점에서 바라보는 HTTP 상태 코드(HTTP status code)

 

 

HTTP헤더

https://velog.io/@cham/HTTP-Header%EC%97%90%EB%8A%94-%EC%96%B4%EB%96%A4-%EC%A0%95%EB%B3%B4%EB%93%A4%EC%9D%B4-%EB%8B%B4%EA%B2%A8%EC%9E%88%EC%9D%84%EA%B9%8C

HTTP Header에는 어떤 정보들이 담겨있을까?