[코딩애플] js part 3-6. async/await

Promise 어려워서 싫으면 async/await을 사용합시다

async/await

• 2018년에 나온 신문법
• 프로미스를 더 깔끔하게 사용할 수 있는 키워드
• 순차적으로 많은 걸 사용할 때 유용함

예제

연산이 끝나면 특정 코드를 실행하고 싶다면 -> 콜백함수 쓰기

function 더하기(콜백){
    1 + 1;
    콜백();
}
더하기(함수);

근데 이거 하기 싫으면 -> Promise 써보겠음

function 더하기(){
	return new Promise(...)
}
더하기().then(function(){
    
})

근데 프로미스 만들기 너무 귀찮다 -> async / await

• **async를 funciton 앞에 붙이면 함수가 Promise 역할 가능**
• **함수 실행 후에 Promise 오브젝트가 남는다.**

async function 더하기(){
    1 + 1; // 1+1 연산이 성공하면
}
더하기().then(function(){
    console.log('성공이에요'); // 
})

function 앞에 async만 붙이면 함수 실행후에 Promise 오브젝트가 남으니까, 이제 new Promise() 어쩌고 디자인 안해도 .then() 사용 가능하다

async function에서 성공시 resolve처럼 결과를 전달해줄 수도 있다(성공만 가능).

async function 더하기(){
    return 1 + 1;
}
더하기().then(function(결과){
    console.log(결과); // 2
})

async function가 실패하게 하기 -> Promise.reject(실패)

async function 더하기(){
	return Promise.reject('실패입니다')	
}

async function 안에서 쓰는 await

함수 안에서 Promise 쓰기

async function 더하기(){
    var 프로미스 = new Promise(function(성공, 실패){
        성공();
        실패();
    })
}

예제

async function 더하기(){
    var 프로미스 = new Promise(function(성공, 실패){
        var 힘든연산 = 1 + 1;
        성공()
    })
    
    프로미스.then(function(){ // 프로미스 내의 연산이 성공하면 이 코드를 실행해주세요~
        console.log('성공했어요');
    });
}

더하기(); // 성공했어요

await을 쓰면 then 대신 사용 가능하다. **프로미스 연산결과는 변수에 저장**할 수 있다.

async function 더하기(){
    var 프로미스 = new Promise(function(성공, 실패){
        var 힘든연산 = 1 + 1;
        성공();
    })
    
    var 결과 = await 프로미스; // await: 프로미스가 해결될 때까지 기다려!
    console.log(결과);
}

더하기(); // 성공했어요

함수 밖에서 await을 사용했다면 함수로 묶어주고 함수 앞에 async를 붙여주면 된다.

await은 프로미스 실패시 에러나고 멈춘다.

async function 더하기(){
    var 프로미스 = new Promise(function(성공, 실패){
        var 힘든연산 = 1 + 1;
        실패();
    })
    
    var 결과 = await 프로미스 // 여기서 에러로 인해 멈춤
    console.log(결과);
    
    console.log(111); // 실행 안됨
}

더하기(); // 성공했어요

그래서 실패를 다룰 수 있는 문법, try catch 가 있다.

try{
	이걸 해보고 에러나면
} catch(){
    이걸 실행해주세요
}

적용해보자.

async function 더하기(){
    var 프로미스 = new Promise(function(성공, 실패){
        var 힘든연산 = 1 + 1;
        실패();
    })
    
    try {
        var 결과 = await 프로미스;
    	console.log(결과);
    } catch {
        console.log('프로미스 연산이 잘안되었군요');
    }

}

더하기(); // 프로미스 연산이 잘안되었군요

Q. <button>을 누르면 성공 판정하는 Promise & 성공시 '성공했어요'를 출력하려면?

async function clickButton(){
    try{
        const 프로미스 = new Promise(function(resolve, reject){
            const button = document.getElementById('button');
            button.on('click', function(){
                resolve('성공했어요');
            }); 
        });
        const result = await 프로미스;
        console.log(result);
    } catch {
        
    }
}
clickButton();