[JS]비동기(async/await)

콜백 패턴은 가독성이 좋지 않은데 프로미스도 콜백 패턴을 사용함🤔
👉이문제를 해결하기 위해 ES8에서 마치 동기 처리처럼 처리하는 🌟async/await🌟 가 도입됨!!!

[프로미스 참고]

[JS]비동기(프로미스)

async 함수🎈

• async 함수는 async 키워드를 사용해 정의하며 언제나 프로미스를 반환
• async 함수가 명시적으로 프로미스를 반환하지 않더라도 async 함수는 암묵적으로 반환값을 resolve하는 프로미스를 반환
• await 키워드는 반드시 async 함수 내부에서 사용해야 함

//async 함수 선언문
async function foo(n) {return n;}
foo(1).then(console.log) // 1

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

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

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

//async 클래스 메서드
class MyClass {
	async bar(n) {return n;}
}
const myClass = new MyClass();
myClass.bar(5).then(console.log); //5

 

[mdn 공식문서]

async function - JavaScript | MDN

---

await 키워드🎈

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

async function bar(n) {
	const a = await new Promise(resolve => setTimeout(() => resolve(n), 3000));
    //두번째 비동기 처리를 수행하려면 첫번째 비동기 처리 결과가 필요
    const b = await new Promise(resolve => setTimeout(() => resolve(a + 1), 2000));
    //세번째 비동기 처리를 수행하려면 두번째 비동기 처리 결과가 필요
    const c = await new Promise(resolve => setTimeout(() => resolve(b + 1), 1000));
    
    console.log([a,b,c]); // [1,2,3]
}

bar(1); // 약 6초 소요

 

[mdn 공식문서]

await - JavaScript | MDN