💡 새로운 서비스를 개발하면서 개인적으로 정리한 내용들입니다. 글이 깔끔하지 않을 수 있습니다.

📔 다음글 보기: Axios 다양하게 활용하기: interceptor

Axios?

axios는 js 기반의 환경에서 http 통신을 수행할때 사용하는 모듈로 많은 사람들이 사용 중으로 알고있다. 해당 모듈을 별도의 설정없이도 사용이 가능하지만, 프로젝트 진행시에는 공통된 옵션을 기본설정하여 사용할 수 있다. 여기서는 axios의 기본 사용법보다는 프로젝트에서 사용할때 도움이 될 만한 내용을 정리하며, 기본 내용 및 관련한 내용들은 모두 공식문서를 참조하였습니다.

Axios를 async/await 를 이용하여 사용하는 방법

axios를 이용하여 API호출을 하는 경우 바로 응답이 오지 않기에 일반적으로 비동기 방식을 사용한다. axios 문서에서도 기본적으로 소개하는 사용방식은 Promise-then 방식의 비동기 호출방식을 소개하고 있다. 다만 then 방식의 경우도 api 호출이 복잡해지면 then을 then 내부에서건 또는 chain 형태로 연달아서 쓰는 경우는 발생한다.

// then 을 연속적으로 호출하는 예시
const TestApiCall = () {
  axios.get('https://test.com/api/v1')
    .then((response) => {
      const data = response.data;
      const userId = data.userId;
      axios.get('https://test2.com/api/v2/' + userId)
        .then((response) => {
          console.log("Response >>", response.data)
        })
        .catch(() => {
        })
    })
    .catch((error) => {
      console.log("Error >>", err);
    })
}

위와 같은 형태는 예시이다. 다만 위와 같이 보기에 복잡(불편) 할 수 있는 코드가 나타날 수 있고, js에서도 async/await 를 이용한 비동기 구문이 추가 되었기에 axios도 이를 지원하고 있다. 개인적으로도 async/await 방식을 선호한다.

아래는 async/await 구문을 이용한 방식의 코드이다. 다만 해당 구문에서는 에러처리를 try-catch 방식을 이용해서 작업해야 한다.

// async/await 를 활용하는 수정된 방식
const TestApiCall = async () {
  try {
    const response = await axios.get('https://test.com/api/v1')
    const userId = response.data.userId;

    const response2 = await axios.get('https://test2.com/api/v2/' + userId);
    console.log("response >>", response2.data)
  } catch(err) {
    console.log("Error >>", err);
  }
}

이전의 then 방식에 비해서 위의 방식이 보기에도 작성하기에도 깔끔하다.