Axios instance,intercepter

김대은·2022년 8월 7일
0

Instance

.create를 사용해 사용자 정의 구성을 사용하는 axios instance를 생성할 수 있다.

사용한가능한 인스턴스 메소드는 아래와 같다.

axios.get(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
axios.delete(url[, config])
axios.request(config)
axios.head(url[, config])
axios.options(url[, config])
axios.getUri([config])

Config

url만 필수이고 나머지 속성은 옵션입니다.
method가 지정되지 않으면 기본적으로 get으로 설정됩니다.

  • url: url은 요청에 사용될 서버 URL입니다.
  • method : 요청을 할 때 사용될 메소두 이름입니다.
  • baseURL : url 속성값이 절대 url이 아니라면, baseURL을 설정하는게 좋습니다.
  • headers: 서버에 전송될 사용자 정의 헤더입니다. ex :{'X-Requested-With': 'XMLHttpRequest'}
  • params : 요청과 함께 전송 될 URL 매개변수입니다.
    일반 객체 이거나 URLSearchParams 객채여야 합니다.
  • data: 요청 본문(request body)으로 전송할 데이터 입니다.
    PUT POST PATCH요청 메소드에만 적용 가능합니다.
  • timeout : 요청이 타임 아웃되는 밀리 초를 설정합니다.
    요청이 설정 시간보다 지연될 경우, 요청은 중단됩니다.
    기본값은 0 으로 타임아웃이 없습니다.
  • withCredentials: 자격 증명(credentials)을 사용하여 크로스 사이트 접근 제어(cross-site Access-Control) 요청이 필요한 경우 설정합니다.
  • responseType: 서버에서 응답할 데이터 타입을 설정합니다.
  • cancelToken :요청을 취소하는데 사용할 수 있는 취소 토큰을 지정합니다.
    cancelToken에 관해 더 알아 보려면 ...

Intercepter

인터셉터는 then 이나 catch 로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다.

const createAxios = axios.create({
 	baseURL: 
   });

createAxios.interceptors.request.use(
	config =>{
    //요청을 보내기 전에 수행할 로직
    },
    error =>{
    //요청 에러가 발생했을 때 수행할 로직
    }
);
createAxios.interceptors.response.use(
	response => {
    //응답에 대한 로직 작성
    }.
    error =>{
   //응답 에러가 발생했을 때 수행할 로직 작성
   },
}

위 두가지를 잘 활용한다면,
axios의 중복적인 코드를 줄일 수 도 있고,
그 외로 다양한 기능을 넣을 수 있을 것 같아 반드시 알아두면 좋을 듯 하다.

자세한 내용은
Axios 러닝 가이드를 참조하면 더욱 많은 내용을 볼 수 있다.

profile
매일 1% 이상 씩 성장하기

0개의 댓글