한 줄 요약: 처리시간이 오래 걸리는 코드가 있을 때, 처리가 완료될 때까지 해당 코드에 멈춰 기다리는 게 아니라 그 다음 코드를 먼저 실행하는 방식. 대표적으로 서버로부터 데이터를 받아오는 작업, 암호화/복호화 작업 등을 비동기적으로 처리한다.
🐯 동기와 비동기
동기적이다 : 윗줄에서부터 차례차례 코드가 실행된다.
비동기적이다: 작업이 완료되면 코드가 실행된다. 즉 차례로 실행되지 않는다.
예시를 보자
console.log(1+1)
axios 요청 후 console.log(1+3)
console.log(3+4)
2
7 // 세번째 줄이 먼저 실행되고
4 // axios요청이 끝나면 두번째 줄이 실행된다.Javascript는 기본적으로 동기적이기 때문에 우선 윗줄에서부터 코드를 차례로 실행한다. 근데 두번째 줄의 axios요청 코드의 경우 처리 시간이 오래걸리는 코드임.
이때 자바스크립트는 axios요청 작업이 끝날 때까지 두번째 줄에서 기다리는 게 아니라, 그 다음 코드를 먼저 실행시킨다.
이렇게 비동기적으로 실행되는 함수들이 몇 개 있다.
ajax(서버 요청 함수), 이벤트 리스너, setTimeout 등
다른 말로 이 함수들은 비동기 처리를 지원하는 함수라고도 말할 수 있겠다.
함수가 비동기 처리를 지원한다
= 함수의 작업이 완료될 때까지 해당 코드는 잠시 보류하고, 다른 코드를 먼저 실행시킨다.
🐯 비동기적으로 처리하는 작업들
시간이 어느정도 걸리는 작업들의 경우 비동기적으로 처리한다.
이 작업들이 완료될 때까지 기다리는 건 비효율적이니까!
- Ajax로 서버에서 데이터를 받아와야 하는 작업
- 암호화/복호화 작업
- 몇 초 후에 특정 작업을 실행하고 싶을 때
🐯 async & await
비동기적 작업을 마치 동기적인 작업처럼 처리하기 위한 문법
왜 동기적인 작업처럼 처리해야 하냐면, 비동기적 작업은 결과를 예측할 수 없으니까요. 결과 예측 안되는 애를 그대로 냅뒀다가 어떤 문제가 발생할 지 모르니까요~
“결과를 예측할 수 없는 비동기적 작업을 우리의 컨트롤 하에 두겠다” 라는 일념 하에 나온 문법이 바로 async&await라고 생각하시면 됩니당.
다음과 같이 사용한다.
async function 함수명() {
await 비동기처리메소드명();
}함수 앞에 async 라는 예약어를 붙이고, 함수 내 로직 중 비동기적으로 처리할 코드 앞에 await 를 붙인다.
이렇게 작성을 하게되면, 비동기처리 작업이 끝난 다음(await! 기다려!) 그 다음 코드를 실행하게 된다. 차례로 실행되는 동기적 방식처럼.
try-catch문과 함께 사용하여 예외처리까지 진행한다.
function fetchUser() { // 비동기 로직을 담은 함수
var url = 'https://jsonplaceholder.typicode.com/users/1'
return fetch(url).then(function(response) {
return response.json();
});
}
async function User() {
try {
const user = await fetchUser(); // 서버로부터 사용자 데이터를 가져오는 걸 기다렸다가
console.log(user); // 가져오는 작업이 완료되면 콘솔창에 출력
} catch (error) {
console.log(error);
}
}네트워크 통신 중 발생한 오류 뿐 아니라 일반적인 오류까지도 catch문에서 잡을 수 있다. 콘솔창에 찍힌 에러 메시지를 확인하면 된다.
