Axios

Axios 개념을 정리하기 전 필요한 개념정리(전에 올린 개념들과 함께 공부하는게 좋음!)

 

Callback function

• 다른 함수에 인자로 전달된 함수
• 외부 함수 내에서 호출되어 일종의 루틴 또는 작업을 완료함
• 동기식 비동기식 모두 사용됨
• 비동기 작업이 완료된 후 코드 실행을 계속하는 데 사용되는 경우를 비동기 콜백(asynchronous callback)이라고 함

Async callbacks

• 백그라운드 코드 실행이 끝나면 callback 함수를 호출하여 작업이 완료되었음을 알리거나, 다음 작업을 실행하게 할 수 있음 (ex) click이 되는지 안되는지 기다리다가 클릭이 되었을때 실행시키는 느낌)
• callback 함수를 다른 함수의 인수로 전달할 때, 함수의 참조를 인수로 전달할 뿐이지 즉시 실행되지 않고 함수의 body에서 "called back"됨

callback을 사용하는 이유

• django의 경우 "요청이 들어오면", event의 경우 "특정 이벤트가 발생하면" 이라는 조건으로 함수를 호출할 수 있었던건 'Callback function' 개념 때문에 가능!

callback Hell

• 순차적인 연쇄 비동기 작업을 처리하기 위해 callback함수를 계속 호출하게 됨으로써 디버깅와 코드의 가독성이 떨어짐
• 이를 해결하기 위해
  1. 코드의 깊이를 얕게 유지
  2. 모듈화
  3. 모든 단일 오류 처리
  4. ☆promise callbacks(promise 콜백 방식을 사용)

promise object

비동기 작업의 최종 완료 또는 실패를 나타내는 객체

• 미래의 완료 또는 실패와 그 결과 값을 나타냄
• 미래의 어떤 상황에 대한 약속

지금까지 배운 내용들을 뒷받침삼아 Axios를 사용하여야 하는 이유를 짧게 요약해 보자면

 

single thread가 잘 동작을 하기 위해서 web api를 사용하는데 그러기 위해선 event loop이
일 할당을 도와주고 이는 async(비동기)움직임을 제어하기 위해서 인데,
이 비동기적인 움직임을 이해하기 위해서 callback함수에 대해 배우고
비동기적인 함수에게 순서를 부여하는데 callback hell에 빠지지 않기 위해 promise를 배웠다.
이 promise는 Axios를 사용하여 표현할 수 있다!

 

대망의 Axios

 

Axios

• "Promise based HTTP client for the browser"
• AJAX요청을 하는데 XHR보다 더 편리하게 요청이 가능하도록 도움을 준다.
• parsing도 axios에서 해준다.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios 공식문서에서 script내에 axios를 불러올 코드를 가져온다.

.then(callback)

• 성공했을 때의 코드를 callback 함수 안에 작성
• 각각의 then은 서로 다른 promise를 반환

.catch(callback)

• .then이 하나라도 실패하면(거부 되면) 동작
• 이전 작업의 실패로 인해 생성된 error 객체는 catch 블록 안에서 사용할 수 있음

promise를 쓰는 방법으로 객체를 axios라는 객체를 사용한다 .

 

예제코드

const myPromise = axios.get(URL)

myPromise
	.then(response => {
    	return response.data
})

axios.get(URL)
	.then(response => {  //성공이 된다면 return을 수행
    	return response.data
	})
	.then(response => {  //위가 성공된다면 return을 수행
    	return response.data
	})
	.catch(error => {  //실패한다면 이와같이 실행
    	console.log(error)
	})
	.finally(function () { //실패든 성공이든 마지막은 이렇게 꼭 실행
    console.log("나는 마지막에 무조건 시행!!")
})