axios

HTTP 비동기 통신

피하고 싶어도 피할 수 없다.

이왕 이렇게 된거 좀 제대로 알고 써보자.

근데, 방법이 axios 뿐일까? Node.js를 활용하여 비동기 통신을 할 수 있는 방법이 axios 뿐인가?

그게 아니라면 왜 굳이 axios일까? fetch도 있는데...

axios

axios의 특징에 대해서 알아보자

• 기본적으로 axios는 HTTP에 대한 응답을 JSON으로 바꿔준다.
• axios instance를 만들 때, 공통적인 config 부분을 설정할 수 있다. ( header... )
• 공통적인 response, request 에러 처리가 가능하다

위의 특징들은 axios의 특징인 것과 동시에 fetch와의 차이점 이라고 볼 수 있다.

fetch를 활용한 비동기 통신에서는 이러한 것들을 요청을 보낼 때마다 추가해 줘야 한다.

하지만 axios를 활용한다면 axios instance를 만들면서 이러한 공통적인 부분들을 추가할 수 있다.

활용

axios instance 생성

const axiosInstance = axios.create({
  baseURL: "url",
  headers: {"Content-Type": "application/json"},
  timeout: 1000,
});

 

axios interceptor

const axiosInstance = axios.create({
  baseURL: "url",
  headers: {"Content-Type": "application/json"},
  timeout: 1000,
});

axiosInstance.interceptors.request.use((config) => {
    // 요청 성공 직전 처리
    return config;
  }, (error) => {
    // 에러 처리
    return Promise.reject(error);
  });

// 이것 뿐만 아니라 response도 가능

위의 코드처럼 axios instance를 생성하여 요청을 보낼 때마다 try ~ catch 구문으로 감싸주지 않더라도 예외 처리에 대응할 수 있다.

...

아직도 비동기 처리는 머리가 아프다.

하지만 피해갈 방법이 없으면 제대로 알고 사용할 수 있도록 노력하자.