5/8 (월) 아마란스 - Axios 사용법(feat. JavaScript)

[amaran-th]

Axios 사용법(feat. JavaScript)

[jyeost]

Axios 전역 설정이 정확히 어떤 상황에서 쓰이는 거에요?
실제로 전역 설정을 하기 위해서 해당 js를 모든 html에 적용해주어야 하나요?

[amaran-th]

모든 axios 요청에 대해 공통된 옵션을 적용해주어야 할 때 사용합니다!
ex) 모든 요청에 대해 header에 인증 토큰을 포함시켜야 할 때 아래와 같이 설정해줄 수 있습니다

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

그리고 발표에서는 생략했지만, 옵션으로 baseURL을 넣어줄 수 있습니다.
url을 "https://localhost:8080/products"로 줄 수도 있지만
baseURL="https://localhost:8080", url="/products"로 줌으로써 코드 중복을 줄일 수 있는데, 이 때 baseURL을 전역설정 해주면 편하겠죠??

axios에 대한 전역 설정은 그 설정을 해준 파일 내에서만 적용됩니다.
그래서 보통은 사진처럼 api를 호출하고 처리하는 로직을 분리해 하나의 js 파일에 모아둡니다!

[yeonkkk]

axios 전역 설정을 아래와 같이 진행하면, 토큰을 헤더로 보낼 필요 없는 요청인 경우를 제외할 수 있는 방법이 있을까요?

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

[amaran-th]

파일 분류 자체를 인증 토큰이 필요한 api를 호출하는 로직을 모아둔 파일과 토큰이 필요하지 않는 로직을 모아둔 파일로 분리할 수 있겠습니다.
전역 설정의 용도 자체가 한 파일 내에서 정의된 모든 api에 대해 공통적인 config를 설정해주기 위함이니, 특정 api만 제외할 수 있는 방법은 없는 것 같습니다!