[React] axios 활용

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 방식에 비해서 위의 방식이 보기에도 작성하기에도 깔끔하다.

 

https://third9.github.io/posts/Axios%EB%8B%A4%EC%96%91%ED%95%98%EA%B2%8C_%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0-async_await%EC%82%AC%EC%9A%A9/

Axios 다양하게 활용하기: async/await사용 - Third9's Lounge

 

 

https://lahuman.jabsiri.co.kr/251

Async Await을 이용하여 처리시 catch를 처리하지 않아 response 무한 대기 현상