Javascript : 동기와 비동기 (4) Async & await

Async & await 은 기존 비동기 처리방식인 콜백함수, 프로미스의 단점을 보완한다.

사용하기 편리하고 가독성이 좋다.

Async & await 은 비동기적인 코드를 더 쉽게 절차적으로 이용할 수 있게 한다.

 

 

function 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환한다.

async function test() {
	return "hi"
    }
    
    test().then(alert) // hi

 

프로미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다.

return 값이 Resolve( ) 안의 값이 된다고 생각하면 된다.

 

직접 프로미스를 써줄 수 도 있는데, 결과값은 같다.

 

async function test() {
	return new Promise((resolve, reject) => {   // or Promise.resolve(console.log("hi")
	resolve(console.log("hi")
    }
}

test().then(alert) // hi

 

함수에 async가 붙으면 그 함수는 프로미스를 반환하게 되는 것이고,

프로미스가 아닌 것은 프로미스로 감싼 뒤에 반환한다.

 

 

 

Await은 async 함수 안에서만 동작한다.

 

const data = await promise;

 

자바스크립트는 함수 본문이 실행되는 도중 await이라는 키워드를 만나면 그 작업이 처리될 때 까지 해당 함수의 다음 실행을 하지 않는다. await가 붙은 작업의 완료를 기다린다. 결과는 그 작업이 완료된 이후에 반환된다.

 

 

사용예시

async function getData() {
	const promise = new Promise((resolve, reject) => {
	setTimeout(() => resolve("success"), 2000)
        });
        
	const data = await promise;
	alert(data); 완료.
}

getData()

 

getData 함수를 호출하면,

우선 promise 변수에 2초뒤에 "success"라는 result값을 할당하는 선언을 만났다. 

브라우저에 요청해두고, 그 다음 코드를 실행하려 한다.

data라는 변수에 위에서 result값으로 위에서 받아온 promise를 넣는 것.

이때 값이 들어올 때까지 await이 있기 때문에 나머지 함수의 실행을 기다려야 한다는 것이 중요하다.

다른 스크립트나 이벤트 처리등은 진행되지만 해당 async함수의 실행은 await이 붙은 작업이 끝날 때 까지 기다린다. 

완료가 되면 다음 alert(data) 가 실행된다.

 

 

await은 promise나 콜백함수에 비해 가독성도 좋고 사용법도 쉽다.

또한 await은 해당 함수의 실행을 멈추지만, 그 외의 다른 작업은 비동기적으로 진행될 수 있기 때문에 리소스도 낭비되지 않는다.