async & await

JavaScript - async & await

// 콜백지옥
timer(1000, function(){
	console.log('작업');
    timer(1000, function(){
    	console.log('작업');
        timer(1000, function(){
        	console.log('작업');
        });
    });
});

// promise를 사용해서 콜백지옥 벗어남
timer(1000)
	.then(function(){
    	console.log('작업')
        return timer(1000);
    })
    .then(function(){
    	console.log('작업')
        return timer(1000);
    })
    .then(function(){
    	console.log('작업')
        return timer(1000);
    })

더 더 더 편하게 써보자!!!

 

async - await

1. 먼저 .then 호출을 await로 바꿔야 한다.
2. function 앞에 async를 붙여 await를 사용할 수 있도록 해야 한다.

// 비동기적인 애들이 동기적인 것처럼 보이게 함
async function run(){
    await timer(1000)
    	console.log('작업')
    await timer(1000)
    	console.log('작업')
    await timer(1000)
    	console.log('작업')
}
run();

---

예제)

Promise를 썼을 때,

<script>
    function timer(time){
        return new Promise(function(resolve){
            setTimeout(function(){
                resolve(time);
            }, time);
        })
    }
    console.log('start');
    timer(1000).then(function(time){
    	console.log('time:'+time);
        return timer(time+1000);
    }).then(function(time){
    	console.log('time:'+time);
        return timer(time+1000);
    }).then(function(time){
    	console.log('time:'+time);
        console.log('end');
    });
</script>

// start
// time:1000
// time:2000
// time:3000
// end

 

예제)

async, await를 썼을 때,

 

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

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

async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환한다.

 

await는 말 그대로 프라미스가 처리될 때까지 함수 실행을 기다리게 만든다.

프라미스가 처리되면 그 결과와 함께 실행이 재개된다.

<script>
    await function run(){
        console.log('start');
        var time = await timer(1000);
        console.log('time:'+time);
        time = await timer(time+1000);
        console.log('time:'+time);
        time = await timer(time+1000);
        console.log('time:'+time);
        console.log('end');
        return time;
    }
    async function run2(){
    	console.log('parent start');
        var time = await run();
        console.log('time:'+time);
        await run();
        console,log('parent end');
    }
    console.log('parent parent start');
    run2().then(function(){
    	console.log('parent parent end');
    });
</script>

// parent parent start
// parent start
// start
// time:1000
// time:2000
// time:3000
// end
// time:3000 // return값
// parent end
// parent parent end

코드가 깔끔해지고 읽기도 쉬워졌다!!!

 

주의사항!

await는 최상위 레벨 코드에서 작동하지 않는다.

await는 ‘thenable’ 객체를 받는다.

메서드 이름 앞에 async를 추가하면 async 클래스 메서드를 선언할 수 있다.

 

promise 앞에 await를 붙이면 자바스크립트는 promise가 처리될때 까지 대기하고 처리가 완료되면 동작이 이어진다.

1. 에러 발생 – 예외가 생성됨(에러가 발생한 장소에서 throw error를 호출한 것과 동일함)
2. 에러 미발생 – 프라미스 객체의 result 값을 반환

async/await를 사용하면 promise.then/catch가 거의 필요 없지만,

가끔 가장 바깥 스코프에서 비동기 처리가 필요할때 promise.then/catch를 써야하는 경우가 생겨서 async/await가 프로미스를 기반으로 한다는 걸 알고 있어야한다.

 

이 내용은 생활코딩 async - await 내용을 포함하고 있다!!

 

---

<출처>

https://ko.javascript.info/async-await

https://www.youtube.com/watch?v=1z5bU-CTVsQ&list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI&index=3