Axios 비동기 처리 라이브러리
동기화 방식은 순차적으로 작업을 위에서 부터 순차적으로 실행합니다.
동기화 방식은 직관적이고 쉽지만 특정 작업이 오래 걸리는 경우, 다음 작업이 실행하지 않고 무작정 기다리는 단접이 있습니다.
비동기 방식은 작업에 요청을 한뒤 기다리지 않고 다음 작업을 실행합니다.
그러다가 이전 요청이 완료되어 결과가 통보되면 이전 요청을 완료시키는 방식으로 동작합니다.
자바스크립트는 특히 서버와 브라우저 간 통신 작업이 많기 때문에, 비동기 방식으로 서버에 요청 작업을 보내고 나머지 다른 작업들을 처리하다가 서버로부터 결과 통보 요청이 오면 그 작업을 마무리 하는 식으로 코딩합니다.
여러 요청을 비동기로 처리하다보면 로직의 실행 순서를 헷갈리게 되어 각종 object들이 undefined 가 되는 저주에 걸립니다. ㅎㅎ
이러한 결과 통보 방식을 callback function 으로 부르는데 함수의 인자로 다른 함수를 전달하는 방식입니다.
function doA( callback ){
...
result1 = ...
result2 = callback(result1)
...
}
위 예제는 파라미터로 전달되는 콜백을 내부에서 호출하는데, 자바에서는 Java8 부터 람다식이 도입되면서 가능합니다.
자바스크립트의 함수는 일급 객체(object)라서 파리미터로도 쓸 수 있고 리턴 타입도 될 수 있습니다.
하지만 콜백함수 방식을 쓰다보면 비동기 작업이 많아지고 중첩이 되면 콜백 지옥에 빠져 더더욱 복잡해져 불편해집니다.
그래서 자바스크립트는 Promise라는 개념을 도입해서 비동기 호출을 동기화된 방식 처럼 코드를 작성 할 수 있는 문법을 만들었습니다.
Axios는 이 Promise를 활용해 동기화 방식처럼 코딩할 수 있게 해주는 라이브러리입니다.
axios | Promise based HTTP client
Powerful interceptorsOur innovative interceptor system allows you to control the request and response lifecycle. You can modify requests, responses, and errors.
axios.rest
Ajax, React, Vue, Angular 등에서 활용 할 수 있습니다.
적용 예제:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Axios CDN 예제</title>
</head>
<body>
<h1>Axios CDN 테스트</h1>
<!-- axios CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios.get('https://요청할 REST API URI')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.error('요청 실패:', error);
});
</script>
</body>
</html>
비동기 처리 예제
//async는 비동기 함수라는 것을 명시
async function get1(param1){
//비동기로 URI REST API 호출
const result = await axios.get(`https://요청URI주소`)
console.log(result)
return result
}이후 작업에서 get1() 함수를 호출해서 간단히 비동기 함수를 사용 할 수 있습니다.
이 비동기 함수의 리턴 값은 우선 Promise를 리턴받게 하고 이후 요청에 대한 응답이 완료되면 그 때 result 값을 실제 리턴 받아 처리 하게 됩니다.
비동기 결과 처리 방식 결정
비동기 함수를 이용해 결과를 처리하는 방식은 크게 두 가지가 있습니다.
1. 비동기 함수에서 비동기 통신만 처리하고 호출 한 쪽에서 then()이나 catch() 를 이용해서 처리
2. 비동기 함수를 호출할 때 나중에 처리할 내용을 같이 별도 함수로 구성해서 파라미터로 전송하는 방식
Vue나 React에서는 통신하는 영역과 이벤트 처리 영역을 분리하는 1번 방식을 사용합니다.
