async & await

비동기 작업(asynchronous)

동시에 여러 가지 요청을 처리하고, 기다리는 과정에서 다른 함수도 호출하고!
서버 API를 호출할 때 외에도 작업이 비동기적으로 처리되는 예로 setTimeout 함수가 있음

function printMe() {
	console.log('Hello world');
}

setTimeout(printMe, 3000);
console.log('대기 중...');

실행결과

대기 중...
Hello world

setTimeout이 사용되는 시점에서 코드가 멈추는게 아니라
일단 코드가 위부터 아래까지 다 호출되고 3초 뒤에 printMe가 호출되는 것!

자바스크립트에서 비동기 작업을 할 때 가장 흔히 사용하는 방법은 콜백함수를 쓰는 것!

콜백함수란?

위 코드에서는 printMe가 3초 뒤에 호출되도록 printMe 함수 자체를 setTimeout 함수의 인자로 전달 해줬는데, 이런 함수를 콜백함수라고 함!

그런데,, 이런 콜백함수가 중첩되어 여러개가 생기면 콜백지옥이 형성된다...
자세한 내용은 드림코딩 콜백 함수 설명을 참고하자!
링크텍스트

그리고 Promise는 콜백지옥 같은 코드가 형성되지 않게 하는 방안인데,
이러한 Promise를 더욱 쉽게 사용하게 해주는게 async & await이다!

async & await

깔끔하게 promise를 사용할 수 있는 방법이다!

function fetchUser() {
	//10초 걸리는 네트워크 응답 코드 있다 치고 
    return 'hanbit';
}

const user = fetchUser();
console.log(user);

자바스크립트는 한줄한줄 처리하기 때문에
위의 코드처럼 비동기 처리를 해주지 않으면 10초 후에 user에 hanbit이 반환된다!

function fetchUser() {
	return new Promise((resolve, reject) => {
    	//10초 걸리는 네트워크 응답 코드 있다 치고 
        resolve('hanbit');
    });
}

const user = fetchUser();

1. async

async function fetchUser() {
	//10초 걸리는 네트워크 응답코드 있다 치고 
    return 'hanbit';
}

const user = fetchUser();

2. await

코드를 입력하세요