[TIL] async/await

oaksusu·2024년 3월 22일

TIL

목록 보기

16/41

1. async

1-0. 정의

async 는 함수를 비동기 함수로 만들어줌
await은 비동기 처리 결과를 기다렸다가 받을 수 있게 해주는 키워드

1-1. async/await이 나오게 된 배경

: 콜백지옥을 해결한 promise에서 더 발전시켜서, 비동기 함수를 동기 함수처럼 사용할 수 있게 해주기 위해서

1-1-0. 프로미스와 원하는 출력 결과

function timer (time) {
	return new Promise(function (resolve) {
    setTimeout(function () {
    	resolve(time);
    }, 1000)
    })
}

start
time: 10000
time: 20000
time: 30000
end

1-1-1. promise 사용 예시

console.log('start');
timer(1000)
	.then(function(time) {
    	console.log('time: ', time);
        return time + 1000;
    })
    .then(function(time) {
    	console.log('time: ', time);
        return time + 1000;
    })
    .then(function(time) {
    	console.log('time: ', time);
        return time + 1000;
        console.log('end');
    })

1-1-2. async/await를 사용한 예시

async function run(time) {
	console.log('start');
	let 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');
    
}

1-2. async 함수는 promise를 암시적으로 반환

function timer (time) {
	return new Promise(function (resolve) {
    setTimeout(function () {
    	resolve(time);
    }, 1000)
    })
} 
async function run(time) {
	console.log('start');
	let 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');
    
}

async run(); // 이런식으로 async 함수 앞에 await을 쓸수 있음