728x90
// async, await : promise를 좀 더 간결하고 간편하고 동기적으로 실행되는것처럼 보이게 만들어 줌 / 새로운 것이 아닌 기존의 promise위에 좀 더 간편한 api를 제공
// syntactic sugar : 기존의 존재하는것 위에 기존에 존재하는것을 감싸서 좀 더 간편하게 사용할 수 있는 api를 제공하는것 ex) class (프로토타입을 베이스로한 그 위에 살짝 덧붙여진 것)
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" consent="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="async/async.js"></script>
</head>
<body></body>
</html>1. async
1) pending 상태
//pending상태
function fetchUser()
{
//resolve와 reject를 호출하지 않고 return을 하게되면 Promise가 pending상태
return new Promise((resolve,reject) => {
//do network reqeust in 10 secs...
return 'ellie';
})
}
const user = fetchUser();
user.then(console.log);
console.log(user);
2) fufilled 상태
function fetchUser()
{
//resolve 사용
return new Promise((resolve,reject) => {
//do network reqeust in 10 secs...
resolve('ellie');
})
}
const user = fetchUser();
user.then(console.log);
console.log(user);
3) async (위의 코드를 async를 사용하여 수정)
async를 함수앞에 사용하면 자동으로 코드블록이 promise를 사용한 것처럼 결과가 나옴
async function fetchUser()
{
//do network request in 10 secs...
return 'ellie';
}
const user = fetchUser();
user.then(console.log);
console.log(user);
2. await
1) await는 async가 붙은 함수 안에서만 사용이 가능
function delay(ms)
{
return new Promise(resolve => setTimeout(resolve,ms)); //정해진 ms가 지나면 resolve를 호출하는 promise를 return
}
async function getApple()
{
await delay(1000); //1초있다가
return '🍎';
}
//chaining
/*
function getBanana()
{
return delay(3000)
.then(() => '🍌');
}
*/
//위와같이 chaining을 쓰는것보다 아래와 같이 동기적인 코드를 쓰는것처럼 만들면 더 이해가 쉬움
async function getBanana()
{
await delay(1000); //1초있다가
return '🍌';
}코드 실행 :
1) getApple()과 getBanana()로 인해 getApple : 1초 + getBanana : 1초 = 총 2초뒤에 결과값이 출력됨
//이렇게 작성하게 되면 callback지옥과 비슷한 문제가 발생함
/*
function pickFruits()
{
return getApple()
.then(apple =>{
return getBanana()
.then(banana => `${apple} + ${banana}`);
})
}
*/
//위의 코드를 해결하기 위해 아래와 같이 수정
async function pickFruits()
{
const apple = await getApple();
const banana = await getBanana();
return `${apple} + ${banana}`;
}
pickFruits().then(console.log);
2) 코드를 병렬적으로 실행 : 코드를 병렬적으로 실행하지 않으면 사과1초, 바나나1초 총 2초를 기다려야 하는데 병렬적으로 실행할 경우 1초뒤에 사과, 바나나 코드가 같이 실행
async function pickFruits()
{
const applePromise = getApple(); //apple의 promise를 만들자마자 getApple()의 코드가 실행됨
const bananaPromise = getBanana(); //banana의 promise를 만들자마자 getBanana()의 코드가 실행됨
const apple = await applePromise;
const banana = await bananaPromise;
return `${apple} + ${banana}`;
}
pickFruits().then(console.log);
3. 유용한 promise
function pickAllFruits()
{
//Promise.all : promise배열을 전달하면 모든 promise를 병렬적으로 받을 때까지 모아주는 역할
return Promise.all([getApple(),getBanana()])
.then(fruits => fruits.join(' + '));
}
pickAllFruits().then(console.log);
function pickOnlyOne()
{
//Promise.race : 배열로 전달된 promise 중에서 가장먼저 return된 것만 반환
return Promise.race([getApple(),getBanana()]);
}
pickOnlyOne().then(console.log);
728x90
'프로그래밍 언어 > Javascript' 카테고리의 다른 글
| 1. 변수 | primitive 타입과 object의 차이점 (0) | 2021.08.25 |
|---|---|
| 자바스크립트 함수 기본편 (0) | 2021.08.25 |
| 프로미스 개념 / 콜백 지옥 코드 수정 (0) | 2021.08.24 |
| 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 예제 (0) | 2021.08.24 |
| JSON 개념 정리와 활용 방법 (0) | 2021.08.24 |