Javascript 비동기 처리

💦 비동기 처리

👉 비동기 개념

- Code Interpreter(인터프리터)는 개발자가 짠 javascript 코드를 읽고 순차적으로 코드를 실행시키고, 결과가 나오면 다음 코드를 읽는 방식으로 동작한다.

- javascript는 프론트엔드 개발자가 짠 javascript 코드가 브라우저에서 실행시키기 위해서 code interpreter는 대표적으로 브라우저 내부에 탑재되어 있다.

- 그러나 만일 특정 코드에서 결과를 얻기까지 오랜 시간이 걸리면 아래 줄의 코드는 실행되지 않게 되기에 제대로 동작하지 않는다 -> 네트워크 통신(결과를 받기까지 꽤 걸리는 작업), 복잡한 계산을 실행하는 코드

- 이를 방지하기 위해서 javascirpt는 비동기 방식을 지원한다

- 비동기 처리가 적용된 코드의 경우, 실행이 되면 다음 코드가 실행된다. 그리고 결과를 얻게 되면 인터프리터가 다른 코드를 처리하다가 중간에 비동기 처리의 결과를 처리하게 된다.

- 즉, 코드 실행 처리를 기다리지 않고 다음 코드를 실행하다가 해당 코드가 실행 완료하고 신호가 오면 그 떄가서 처리하는 방식이다

- 반대로 동기 방식은 코드가 다 실행될 때까지 다른 코드로 넘어가지 않는다!

//setTimeout 함수도 비동기 처리를 지원합니다.
setTimeout(function(){
	console.log('3초 뒤에 실행됩니다!');
}, 3000)
console.log('바로 실행됩니다.');

 

👉 Promise 객체

- javascript에는 비동기 처리를 지원하는 여러 방식이 있는데, 그 중 하나가 Promise 객체를 이용한 방식이다

- 비동기 처리를 지원하는 Promise 객체는 정상적으로 실행이 끝난 후 실행되는 'then' 함수(메소드)와 에러가 났을 때 실행되는 'catch' 함수를 가진다

 - 대표적으로 사용되는 Promise 객체로 fetch 함수가 있다.

- fetch는 네트워크 통신 함수이며 대표적으로 Promise 객체를 사용하는 함수이다.

//fetch 함수를 실행하면 Promise 객체를 반환해요.
var result = fetch('https://jsonplaceholder.typicode.com/todos/1') 
//result에는 Promise 객체가 들어있습니다.

console.log('네트워크 통신이 끝날 떄 까지 기다리지 않고 바로 실행되요 1');

result.then(function(response){
	console.log('이 코드는 네트워크 통신이 끝나고 나서 실행되요.')
}).catch(function(error){
	console.log('이 코드는 에러가 났을 때 실행되요')
})

console.log('네트워크 통신이 끝날 떄 까지 기다리지 않고 바로 실행되요 2');

- 정리하면 Promise 객체는 then과 catch 메소드를 가지고 있으며, then은 코드가 제대로 수행되었을때, catch는 문제가 발생했을 때 작동한다!

//아래와 같이 합쳐서 사용할 수 있습니다
fetch('URL 주소')
.then(function(response){ //then 함수에는 callback 함수를 입력합니다.
	//응답을 받았을 때 수행하는 코드를 작성
	//성공적으로 실행됐다면 response에는 fetch의 결과가 들어있습니다.
})
.catch(err => {  //catch 함수에는 callback 함수를 입력합니다.
	//비동기 작업에 실패했을 때 수행하는 코드 작성
	//err에는 에러 관련 정보들이 들어있습니다. 
})
console.log('네트워크 통신이 끝날 때 까지 기다리지 않고 바로 실행되요 1');
console.log('네트워크 통신이 끝날 때 까지 기다리지 않고 바로 실행되죠 2');

 

- 일반적으로 javascript에서는 네트워크 통신을 하도록 돕는 fetch 함수와 이보다 네트워크 통신을 더 편하게 도와주는 외부 라이브러리인 axios가 있다