async/await

async/await은 Promise를 기반으로 동작한다. promise는 chaining을 할 수 있다. 그러나 매번 체이닝을 하면 코드가 난잡해질 수 있어 async와 await가 등장했다. 고로 async/await은 promise의 syntactic sugar라고 이야기 한다.

- clear style of using promise 

*syntactic sugar

완전 새로운 문법이 아니라 기존 문법위에 또는 기존 문법을 감싸서 조금 더 편하게 사용할 수 있는 API를 제공하는 것을 syntactic sugar라고 이야기한다. 예를 들어 class는 기존 prototype에서 등장한 문법이다.

 

async 함수

async 함수는 async 키워드를 사용해 정의하며 언제나 프로미스를 반환한다.

//async 함수 선언문
async function foo(n) { return n; }
foo(1).then(v => console.log(v)); // 1
//참고로 v는 foo함수의 resolve에서 반환된 값을 받는다.

//async 함수 표현식
const bar = async function(n){ return n; }
bar(2).then(v => console.log(v)); //2

//async 화살표 함수
const baz = async n => n;
baz(3).then(v => console.lgo(v)); //3

//async 메서드
const obj = {
	asynce foo(n) { return n; }
};
obj.foo(4)then(v=> console.log(v)); //4

//async 클래스 메서드
class Myclass {
	async bar(n){ return n };
}

//클래스의 constructor 메서드는 async 메서드가 될  수 없다.
//클래스의 constructor 메서드는 인스턴스를 반환해야 하지만
//async 함수는 언제나 프로미스를 반환해야 한다. 
const myClass = new MyClass();
myClass.bar(5).then(v => console.log(v)); //5

//잘못된 예시
class MyClass {
	async constructor(){}
    // SyntaxError
}

const myClass = new MyClass();

 

 

await 키워드

await 키워드는 프로미스가 settled 상태(비동기 처리가 수행된 상태)가 될 때까지 대기하다가 settled 상태가 되면 프로미스가 resolve한 처리 결과를 반환한다. 반드시 async 함수 내부에서 사용해야 한다.

async function foo(){
	const promise = new Promise((resolve,reject)=>{
    	setTimeout(()=>{
        	resolve('hello world!');
        }, 1000);
    });
    
    const result = await promise;
    console.log(result); //'Hello, world'
}

foo();