async await 내용 변형하기 (마지막 부분 중요)
+a 내용
function delay(ms){
return new Promise(resolve =>setTimeout(resolve,ms));
}
위의 해당내용은
function delay(ms){
return new Promise((resolve,reject) =>
{
return setTimeout(()=>{resolve()},ms)
}
);
}
이와같이 바꿔쓸 수 있다.
기존에 배운 코드 (좋은 코드)
function delay(ms){
return new Promise(resolve =>setTimeout(resolve,ms));
}
async function getApple(){
await delay(500);
return 'apple';
}
async function getBanana(){
await delay(500);
return 'banana';
}
async function pickFruits(){
const a = await getApple();
console.log(a)
const b = await getBanana()
console.log(b);
return `${a} + ${b}`;
}
pickFruits().then(console.log)
console.log('!!')
- 결과
!! //바로 apple //0.5초 뒤 banana //1초 뒤 apple + banana //1초 뒤
- 설명 : pickFruits는 async로 비동기이므로 해당 내용들은 대기한 상태로 아래의
console.log('!!')
가 먼저 실행되고
pickFruits()
는 await에 의해getApple
함수를 가져오고
getApple
은 비동기함수이므로return 'apple'
은 먼저 실행되지않고 그위의await
부분의 해당delay
함수에 의해 0.5초 진행 후apple
을 리턴한다.
그후 a를 출력하고
마찬가지로banana
도 리턴 한후 b를 출력하고
pickFruits()를 then을 통해 출력한다.
- 혼자 설명해보기
1) pickFruits 실행해야겠지
2) 내용보니까 getApple함수가 await으로 되어있네?
3) getApple을 보니 async함수이고 await으로 delay함수가 되어있네?
4) delay함수를 보니 new Promise를 사용했네?
5) 즉, delay함수는 어떤 시간이 지난 후 return 'apple'을 진행해야겠네?
6) 0.5초가 지났으니 getApple함수가 끝나고 a를 출력하겠네?
7) 이를 같이 진행하면 다시 0.5초 후 (총 1초) b가 출력되겠네?
8) 그리고 a+b가 리턴되고 console.log로 합쳐서 출력되겠네?
9) 맨 마지막 console.log('!!')는 pickFruits가 시간이 걸리는 비동기니까 그 밖에 있으므로 가장 먼저 출력되겠네?
주의 사항
async를 통해 return한 것은 Promise일 수도 있지만 간단한 값일 수도 있다.
async function a(){
return '100'
};
a().then(console.log)
async function a(){
return new Promise((resolve)=>{resolve(100)})
};
a().then(console.log)
변형해보기 1
function delay(ms){
return new Promise(resolve =>setTimeout(()=>{
console.log('나올까?');
resolve()
},ms));
}
function getApple(){
delay(500);
return 'apple';
}
function getBanana(){
delay(500);
return 'banana';
}
async function pickFruits(){
const a = await getApple();
console.log(a)
const b = await getBanana()
console.log(b);
return `${a} + ${b}`;
}
pickFruits().then(console.log)
console.log('!!')
- 결과
!! apple banana apple + banana //1~4까지 바로 출력 나올까? //0.5초뒤 출력 나올까? //0.5초뒤 출력
-
설명 : pickFruits는 비동기이므로 그 아래의 console.이 먼저 출력되고 그 후
getApple
을 보면 해당 함수는 async 함수가 아니므로 기다리지 않고delay
함수는 동작시키고apple
을 리턴하고 이를 출력하고
마찬가지로getBanana
도 async 함수가 아니므로 기다리지 않고delay
함수는 동작시키고banan
를 리턴하고 출력한다.
이 후 각각의delay
함수가 0.5초 뒤 안의 내용이 출력되는 것을 알 수 있다. -
혼자 설명해보기
1) pickFruits가 실행되는데 await으로 getApple함수의 리턴값을 받네?
2) 그런데 getApple은 async 함수는 아니므로 천천히 읽으니 delay라는 new Promise가 있긴한데 getApple은 async가 아니니 해당 기다리는 것을 async 안에는 순차적으로 기다리지 않고 먼저 'apple'을 리턴하지? 그리고 출력하지
3) 마찬가지로 getBanana도 순차적으로 기다리지 않고 먼저 'banana'를 리턴하지? 그리고 출력하지
4) 그것을 통해 then을 진행하여 console.log로 둘다 출력하지?
5) console.log('!!')는 맨 먼저 출력되겠지?
6) 0.5초 뒤 각각의 delay에 의해나올까?
가 출력되겠지?
사실 이 코드는 이해하려고 시도해본 코드라 좋은 코드는 아님
변형해보기 2
function delay(result,ms){
return new Promise(resolve =>setTimeout(()=>{
console.log('나올까?');
resolve(result)
},ms));
}
function getApple(){
const re = delay('apple',500);
console.log('나는 getApple이 async가 아니라 바로 나와')
return re;
}
function getBanana(){
const ree = delay('banana',500);
console.log('나는 getBanana가 async가 아니라 getApple이 끝나면 바로 나와')
return ree;
}
async function pickFruits(){
const a = await getApple();
console.log(a)
const b = await getBanana()
console.log(b);
return `${a} + ${b}`;
}
pickFruits().then(console.log)
console.log('!!')
- 결과
나는 getApple이 async가 아니라 바로 나와 !! //바로출력 나올까? apple 나는 getBanana가 async가 아니라 getApple이 끝나면 바로 나와 //0.5초뒤 전부 출력 나올까? banana apple + banana //1초뒤 전부 출력
변형해보기 3
function delay(result,ms){
return new Promise(resolve =>setTimeout(()=>{
console.log('나올까?');
resolve(result)
},ms));
}
function getApple(){
const re = delay('apple',500);
console.log('나는 getApple이 async가 아니라 바로 나와')
return '나는 바로 출력';
}
function getBanana(){
const ree = delay('banana',500);
console.log('나는 getBanana가 async가 아니라 getApple이 끝나면 바로 나와')
return '나도 바로 출력';
}
async function pickFruits(){
const a = await getApple();
console.log(a)
const b = await getBanana()
console.log(b);
return `${a} + ${b}`;
}
pickFruits().then(console.log)
console.log('!!')
- 결과
나는 getApple이 async가 아니라 바로 나와 !! 나는 바로 출력 나는 getBanana가 async가 아니라 getApple이 끝나면 바로 나와 나도 바로 출력 나는 바로 출력 + 나도 바로 출력 //바로 출력 나올까? //0.5초뒤 출력 나올까? //0.5초뒤 출력
코드가 개판난 코드
function delay(fruit,ms){
return new Promise(resolve =>setTimeout(()=>{resolve(fruit)},ms));
}
function getApple(){
const result = delay('apple',500)
console.log('~~~~~~~~~apple')
return result;
}
function getBanana(){
const result = delay('banana',500)
console.log('~~~~~~~~~banana')
return result;
}
async function pickFruits(){
const a = await getApple();
console.log(a)
const b = await getBanana()
console.log(b);
return `${a} + ${b}`;
}
pickFruits().then(console.log)
console.log('!!')
- 결과
~~~~~~~~~apple !! //바로 apple ~~~~~~~~~banana //0.5초 뒤 banana apple + banana //1초 뒤
- !!보다 ~~~apple은 먼저 나오고 비동기밖에서의 !!가 먼저 나오고 내부에서 순차적으로 진행해야하는데 개판난 코드다.
이를 수정하려면
function delay(fruit,ms){
return new Promise(resolve =>setTimeout(()=>{resolve(fruit)},ms));
}
async function getApple(){
const result = await delay('apple',500)
console.log('~~~~~~~~~apple')
return result;
}
async function getBanana(){
const result = await delay('banana',500)
console.log('~~~~~~~~~banana')
return result;
}
async function pickFruits(){
const a = await getApple();
console.log(a)
const b = await getBanana()
console.log(b);
return `${a} + ${b}`;
}
pickFruits().then(console.log)
console.log('!!')
이렇게 async await을 추가로 붙인다.
이를 통해 async 밖의 비동기 부분인 !!는 먼저 수행되고 apple부분이 0.5초뒤 순차적으로 수행되고 1초뒤 banan부분이 수행되고 합친 결과로 then을 통해 나오게 된다.!! //바로 ~~~~~~~~~apple apple //0.5초 뒤 ~~~~~~~~~banana banana apple + banana //1초 뒤
정리
- await을 통해 받은 것이 Promise 형태의 경우 해당 Promise가 진행이 완료된 후에 async함수안의 await의 다음 코드가 실행되어지고 (Promise에 영향을 받아 순차적 실행)
만약 아닐경우 바로 await의 다음 코드가 실행된다. (Promise에 영향을 받지않는 순차적 실행)
- 이는 변형해보기 2와 3을 통해 확인 할 수 있다.
- async await를 놓은 후 await의 실행 함수 대상도 async await를 하면 순차적인 진행처리가 가능하다. (기존코드)
- 비동기처리로 async안의 코드를 제외한 밖의 코드는 async 안의 코드를 기다리지않고 먼저 진행되어야한다.
async안의 코드 내에서 await으로 순차적으로 진행되어야 하므로
await으로 받아온 것은 비동기와 관련한 new Promise 형태의resolve
나reject
여야한다.
- async를 통해 리턴한 값은
Promise
형태이다.
주의 할 점
async await의 혼동이 안되게
async 안의 await(await 함수)
에는 new Promise와 같은 resolve를 리턴해야한다.
만약 await의 대상인 함수(await 함수)
안에 또 여러 문장이 있을때는 비동기를 순차적으로 진행하기 위해 해당 함수를 async로 쓰고 await으로 다시 진행을 시킨다.
Author And Source
이 문제에 관하여(async await 내용 변형하기 (마지막 부분 중요)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@khw970421/async-await-내용-변형하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)