-
๐ ๋๊ธฐ์ ๋น๋๊ธฐ | Promises, callbacks, async/await์๋ฐ์คํฌ๋ฆฝํธ 2020. 8. 10. 22:48
๋๊ธฐ(Synchronous) vs ๋น๋๊ธฐ(Asynchronous)
์นดํ ์ ์์ด๋ผ๊ณ ์๊ฐํด๋ณด์. ์๋์๊ฒ ๋ณต์ญ์ ์์ด์คํฐ๋ฅผ ์ฃผ๋ฌธ๋ฐ์๋ค.
๊ทธ๋ผ ์๋์ ๊ฐ์ด 6 ๋จ๊ณ๋ฅผ ๊ฑฐ์ณ ์๋์๊ฒ ์ ๊ณตํ ์ ์๋ค.
1. ์ฃผ๋ฌธ๋ฐ๊ธฐ -> 2์ด ์์
2. ๋ณต์ญ์ํฐ ํ์ฐ๋๋ฅผ ์ปต์ ๋ฃ๋๋ค(1 ์คํผ) -> 2์ด ์์
3. ๋ฐ๋ปํ ๋ฌผ์ ์กฐ๊ธ ๋ถ๊ณ , ํ์ฐ๋๋ฅผ ๋ น์ฌ์ค๋ค. -> 5์ด ์์
4. ํ์ฐ๋๊ฐ ๋ น์๋ค๋ฉด, ์ผ์์ ๋ฃ๊ณ ์ฐจ๊ฐ๊ฒ ์ ์ด์ค๋ค. -> 3์ด ์์
5. ๋ฌผ์ ์ ๋น๋ ๋ฃ์ด์ฃผ๊ณ ์์ด์ค๋ค. -> 2์ด ์์
6. ์๋์๊ฒ ์ ๊ณตํ๋ค. -> 2์ด ์์
๋๊ธฐ์ ์คํ(synchronous system) ์ ํ๋์ ํ ์คํฌ ์คํ์ด ์๋ฃ๋ ๋๊น์ง ๋ค๋ฅธ ํ ์คํฌ๋ค์ ๋ธ๋กํน(์์ ์ค๋จ) ๋๋ ๋ฐฉ์์ด๋ค.
1๋ช ์ ์๋์๊ฒ ์๋ฃ๋ฅผ ์ ๊ณตํ๊ธฐ ์ ๊น์ง ๋ค๋ฅธ ์๋์ ์ฃผ๋ฌธ์ ๋ฐ์ง ์๋๋ค.
unsplash ์ด๋ ๊ฒ ๋๋ฉด ์ผ์ด ๋นํจ์จ์ ์ผ๋ก ์งํ๋๊ฒ ๋๋ค.
๊ทธ์ ๋ฐํด, ๋น๋๊ธฐ๋ ์๋ก ์ํฅ์ ๋ฐ์ง ์๊ณ ๊ฐ์์ ์ผ์ ์งํํ๋ค.
์๋ 1์ ์ฃผ๋ฌธ์ ๋ฐ์๋ค๋ฉด ์์ 6๊ฐ์ง ์คํญ์ด ์งํ๋๊ณ ,
๋์์ ์๋ 2์ ์ฃผ๋ฌธ์ ๋ฐ๊ณ ์์ 6๊ฐ์ง ์คํญ์ด ์งํ๋๋ค.
์๋ 1, ์๋ 2๋ ์๋ก์ ์งํ์ฌํญ์ ์ํฅ์ ๋ฐ์ง ์๊ณ ๋์์ ์ผ์ ์งํํ๋ ๊ฒ์ด๋ค. ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ ์ด๋ ๊ฒ ํ ํ ์คํฌ๊ฐ ์ข ๋ฃ๋์ง ์์ ์ํ์ฌ๋ ๋ค์ ํ ์คํฌ๊ฐ ๋ธ๋กํน๋์ง ์๋๋ค.
console.log ๋ก ๋น๊ตํด๋ณด๋ ๋๊ธฐ/๋น๋๊ธฐ
//synchronous console.log(1); console.log(2); console.log(3); console.log(4); console.log(5);
์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ ์์์ ์๋๋ก ์์ฐจ์ ์ผ๋ก(๋๊ธฐ์ ์ผ๋ก) ์คํ๋๋ค. 1๋ถํฐ 5๊น์ง ์ถ๋ ฅํ๋ ์ฝ๋๋ฅผ ์์ ๊ฐ์ด ์ ์์ ๋ ํ๋์ ์ฝ๋๊ฐ ์คํ๋ ๋์ ๋ค๋ฅธ ์ฝ๋๋ค์ ๋ธ๋กํน(์คํ์ค์ง)๋๋ค.
์ด๋ ๊ฒ ๋๊ธฐ์ ์ผ๋ก ์คํ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ๋ช๊ฐ์ง ๋ฐฉ๋ฒ์ ํตํด ๋น๋๊ธฐ์ ์ผ๋ก ์กฐ์ํ ์ ์๋ค.
1. setTimeout ํจ์ ์ฌ์ฉํ๊ธฐ
* ์๋ฐ์คํฌ๋ฆฝํธ์์๋ setTimeout, setInterval, clearTimeout, clearInterval ํ์ด๋จธ ํจ์๋ฅผ ์ ๊ณตํ๋ค.
์ฒซ๋ฒ์งธ ๋ฐฉ๋ฒ์ ์๋ฐ์คํฌ๋ฆฝํธ ๋นํธ์ธ ํจ์์ธ setTimeout์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ด๋ค.
setTimeout์ ๋ด๊ฐ ์ง์ ์ฝ๋๋ฅผ ์ธ์ ์คํํ ์ง ํ์ด๋จธ๋ฅผ ๋ง์ถ ์ ์๋ค.
setTimeout(functionRef, delay, param1, param2,....)
[parameters]
functionRef : ๋ด๊ฐ ์ง์ ํด ์ค ํ์์ด ์ง๋ ํ์ ์คํํ ํจ์์ด๋ค.
delay : ๋ช ์ด ํ์ ํจ์๋ฅผ ์คํํ ์ง ์ด๋ฅผ ์ง์ ํด์ค๋ค(๋ฐ๋ฆฌ์ด ๊ธฐ์ค: 1000 = 1์ด)
param1, ...paramN : functionRef๋ก ๋๊ฒจ์ค ํ๋ผ๋ฏธํฐ๋ค์ด๋ค.
[return value]
๊ณ ์ ํ id๊ฐ์ ๋ด์ timeoutID๊ฐ์ ๋ฆฌํด๊ฐ์ผ๋ก ์ค๋ค. timeoutID๋ฅผ ํตํด clearTimeout()์ผ๋ก setTImeoutํจ์๋ฅผ ์ ๊ฑฐํ ์ ์๋ค.
//asynchronous setTimeout function console.log(1); console.log(2); setTimeout(() => console.log(3), 3000); console.log(4); console.log(5);
๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด 1, 2, 4, 5๊ฐ ์์ฐจ์ ์ผ๋ก ์ถ๋ ฅ๋ ํ์ 3์ด ๋ค์ 3์ด ์ถ๋ ฅ๋๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
2. callback ์ฌ์ฉํ๊ธฐ
์ฝ๋ฐฑ ํจ์๋ ์ธ์๊ฐ์ผ๋ก ์ ๋ฌ๋ ํจ์์ด๋ค.
//์์ 1 function greeting(name){ console.log('hi' + name); } function userInput(callback){ const name = prompt('enter your name.') callback(name); } userInput(greeting); /* userInputํจ์๋ ํจ์(์ฝ๋ฐฑํจ์)๋ฅผ ์ธ์๊ฐ์ผ๋ก ๋ฐ๊ณ ์๋ค. */
//์์ 2 setTimeout(() => console.log(1), 1000);
์์์ ๋ดค๋ setTimeout ํจ์๋ ์ฒซ๋ฒ์งธ ํ๋ผ๋ฏธํฐ๋ก ํจ์๋ฅผ ์ ๋ฌ๋ฐ๋๋ค. setTimeout ์ ์ฒซ๋ฒ์งธ ์ธ์๊ฐ์ผ๋ก ์ ํด์ง ํจ์๋ฅผ ์ฝ๋ฐฑํจ์๋ผ ํ ์ ์๋ค.
*!์ฃผ์ : setTimeout ํจ์๊ฐ ์ฝ๋ฐฑํจ์๊ฐ ์๋๋ผ, ์ธ์๊ฐ์ผ๋ก ์ ํด์ง ํจ์๊ฐ ์ฝ๋ฐฑํจ์์ด๋ค.
function one(call_two){ console.log(1); //1 ๋ค์์ two์คํ call_two(); } function two(){ console.log(2); } one(two);
๋ณต์ญ์ ์์ด์คํฐ ์ ๊ณต ๊ณผ์ ์ callback ํจ์๋ก ์์ฑํด๋ณด์.
let order = (call_production) => { setTimeout(() => { console.log('์ฃผ๋ฌธ๋ฐ๊ธฐ ์๋ฃ'); production(serve); }, 2000); }; let production = (call_serve) => { setTimeeout(() => { console.log("์ฃผ๋ฌธ์ ๋ฌ ๋ฐ์์ต๋๋ค. ๋ง๋ค๊ธฐ ์์ํฉ๋๋ค"); setTimeout(() => { console.log("๋ณต์ญ์ํฐ ํ์ฐ๋ ๋ฃ๊ธฐ ์๋ฃ."); setTimeout(() => { console.log("๋ฐ๋ปํ ๋ฌผ๋ก ํ์ฐ๋ ๋ น์ด๊ธฐ ์๋ฃ."); setTimeout(() => { console.log("์ผ์ ๋ฃ๊ธฐ ์๋ฃ"); setTimeout(() => { console.log("๋ฌผ ๋ฃ๊ธฐ ์๋ฃ"); console.log("๋ค ๋ง๋ค์์ต๋๋ค. ์๋นํด์ฃผ์ธ์"); serve(); }, 2000); }, 3000); }, 5000); }, 2000); }, 0000); }; let serve = () => { setTimeout(() => console.log('์ฃผ๋ฌธํ์ ์๋ฃ ๋์์ต๋๋ค.'), 2000); } order(production);
callback hell
๊ทธ๋ฌ๋ ์์ ์ฝ๋์์ ๋ณด์ฌ์ง๋ฏ, ํจ์์์ ์ฝ๋ฐฑํจ์๋ฅผ ํธ์ถํ๊ณ ๊ทธ ๊ณผ์ ์ด ๋ฐ๋ณต๋์ด ๋ํ๋๋ ๊ตฌ์กฐ๋ฅผ ์ฝ๋ฐฑ ํฌ์ด๋ผ๊ณ ํ๋ค.
ํ๋ก๋ฏธ์ค๋ฅผ ํ์ฉํ๋ฉด ์ด์ ๊ฐ์ ๋ฌธ์ ์ ์ ์ปค๋ฒํ๊ณ , ๋ ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ด ๋น๋๊ธฐ ์ฝ๋๋ฅผ ์งค ์ ์๋ค.
2. Promise ํ์ฉํ๊ธฐ
๋ถ๋ชจ์ ์์๊ฐ์ ์ฐ๊ฒฐ๊ณ ๋ฆฌ๋ก ๊ณ์ ์ข ์๋๋ ๊ตฌ์กฐ์ ์ฝ๋ฐฑํจ์์ ๋ฌ๋ฆฌ, ํ๋ก๋ฏธ์ค๋ ๊ตฌ์กฐ๊ฐ ๊น๋ํ๋ค. ์ฝ๋๋ฅผ ์คํํ ํ, ์๋กญ๊ฒ ๋ค์ ๋ผ์ธ ์ฝ๋๊ฐ ์คํ๋๋ ๊ตฌ์กฐ์ด๋ค.
ํ๋ก๋ฏธ์ค๋ ์๋์ ์ฌ์ดํด์ ๊ฑฐ์น๋ค.
mdn ์ด๋ฏธ์ง ํ๋ก๋ฏธ์ค๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ๋ค์ 4๊ฐ์ง๋ฅผ ์์์ผ ํ๋ค.
- time๊ณผ work
- ํ๋ก๋ฏธ์ค ์ฒด์ด๋
- ์๋ฌ ํธ๋ค๋ง
- .finally ํธ๋ค๋ฌ
๋จผ์ ํ๋ก๋ฏธ์ค๋ฅผ ์์ฑํด๋ณด์. ํ๋ก๋ฏธ์ค๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์๋ ๋จผ์ ์ฌ์ฉ์๊ฐ ์ง์ ์ฝ์(ํ๋ก๋ฏธ์ค)์ ์์ฑํด์ผ ํ๋ค.
Promise() ์์ฑ์๋ฅผ ํตํด ์์ฑํ ์ ์๋ค.
const promise = new Promise(์คํํจ์);
์ด๋ฒ ํฌ์คํ ์ promise๋ ๋ณต์ญ์ ์์ด์คํฐ๋ฅผ ์๋นํ๋ ๊ฒ์ด๋ค.
ํ๋ก๋ฏธ์ค๋ ์ ์ค ํ๋์ ์ํ๋ฅผ ๊ฐ์ง๊ฒ ๋๋ค.
- ๋๊ธฐ์ํ(pending) : ์์ง ์ดํ, ๊ฑฐ๋ถ๋ ํ์ง ์์ ์ํ
- ์ดํ(fulfilled) : ํ๋ก๋ฏธ์ค๊ฐ ์ฑ๊ณต์ ์ผ๋ก ์ดํ๋จ
- ๊ฑฐ๋ถ(rejected) : ํ๋ก๋ฏธ์ค ์ดํ ์คํจ
์์ง ์๋์ด ์ฃผ๋ฌธํ์ง ์์ ์ํ. ์์ง ์๋ฌด๊ฒ๋ ์คํ๋์ง ์์ ๊ทธ ์ํ๊ฐ pending ์ด๋ค.
ํ๋ก๋ฏธ์ค์์ pending ์ํ๋ฅผ ๊ฑฐ์น ๋ค์๋ ์ฑ๊ณต์ ์ผ๋ก ์ดํ์ด ๋๊ฑฐ๋ ์คํจํ๋ 2๊ฐ์ง ์ํ๊ฐ ๋ฐ์ํ๋ค.
resolve : ํ๋ก๋ฏธ์ค ์ดํ ์ฑ๊ณต์ ๊ฒฝ์ฐ
reject : ํ๋ก๋ฏธ์ค ์ดํ ์คํจ์ ๊ฒฝ์ฐ
1. time ๊ณผ work
ํ๋ก๋ฏธ์ค๋ฅผ ์ฌ์ฉํ ๋๋ ๋จผ์ time ๊ณผ work๋ฅผ ํ์ ํด์ผ ํ๋ค.
๋ณต์ญ์ ์์ด์คํฐ์ ์์์ ๊ฒฝ์ฐ ์๋์ ๊ฐ์ด time๊ณผ work๊ฐ ๋๋๋ค.
time : 2์ด
work : ์ฃผ๋ฌธ๋ฐ๊ธฐ
๋ณต์ญ์ ์์ด์คํฐ ๊ณผ์ ์ ํ๋ก๋ฏธ์ค๋ฅผ ์ฌ์ฉํด ์๋์ ๊ฐ์ด ๋ํ๋ผ ์ ์๋ค.
let is_store_open = true; let order = (time, work) => { return new Promise((resolve, reject) => { if(is_store_open){ setTimeout(() => { resolve(work()); }, time); } else { reject(console.log('the store was closed')); } }); }
1. is_shop_open์ resolve, reject์ ์กฐ๊ฑด์ด๋ค.
- ๊ฐ๊ฒ๋ฌธ์ด ์ด๋ ธ์ ๊ฒฝ์ฐ(is_shop_open = true) => resolve๋ฅผ ์คํํ๋ค.
- ๊ฐ๊ฒ๋ฌธ์ด ๋ซํ์ ๊ฒฝ์ฐ(is_shop_open = false) => reject๋ฅผ ์คํํ๋ค.
3. time๊ณผ work
order ํจ์๋ time๊ณผ work๋ฅผ ์ธ์๊ฐ์ผ๋ก ๋ฐ์์ time๋งํผ ๋๋ ์ด ํ ํ work๋ฅผ ์คํํ๋ ํจ์์ด๋ค.
์์ ๊ฐ์ด time, work๋ฅผ ๋ฐ๋ order ํจ์๋ฅผ ์ฌ์ฉํด ํ๋ก๋ฏธ์ค๋ฅผ ์คํํ๋ค๋ฉด ํจ์ฌ ๊น๋ํ๊ณ , ์ฌ์ฌ์ฉ์ฑ ๋์ ์ฝ๋๋ฅผ ์์ฑํ ์ ์๋ค.
2. ํ๋ก๋ฏธ์ค ์ฒด์ด๋
ํ๋ก๋ฏธ์ค๋ ๊ฐ ๊ณผ์ ์ .then์ ํตํด ์๋๋ค.
order(2000, () => console.log("์ฃผ๋ฌธ๋ฐ๊ธฐ ์๋ฃ")) .then(() => order(0000, () => console.log("์ฃผ๋ฌธ์ ๋ฌ ๋ฐ์์ต๋๋ค. ๋ง๋ค๊ธฐ ์์ํฉ๋๋ค."))) .then(() => order(2000, () => console.log("๋ณต์ญ์ํฐ ํ์ฐ๋ ๋ฃ๊ธฐ ์๋ฃ"))) .then(() => order(5000, () => console.log("๋ฐ๋ปํ ๋ฌผ๋ก ํ์ฐ๋ ๋ น์ด๊ธฐ ์๋ฃ"))) .then(() => order(3000, () => console.log("์ผ์ ๋ฃ๊ธฐ ์๋ฃ"))) .then(() => order(2000, () => console.log("๋ฌผ ๋ฃ๊ธฐ ์๋ฃ"))) .then(() => order(0000, () => console.log("๋ค ๋ง๋ค์์ต๋๋ค. ์๋นํด์ฃผ์ธ์."))) .then(() => order(2000, () => console.log("์ฃผ๋ฌธํ์ ์๋ฃ ๋์์ต๋๋ค.")))
then์ผ๋ก ์ค์ค์ด ์ฐ๊ฒฐ๋ ์ด๋ฌํ ๊ตฌ์กฐ๋ฅผ ํ๋ก๋ฏธ์ค ์ฒด์ด๋์ด๋ผ๊ณ ํ๋ค.
- then๊ณผ then ์ฌ์ด์๋ ; ์ธ๋ฏธ์ฝ๋ก ์ฌ์ฉ์ด ๋ถ๊ฐ๋ฅํ๋ค.
- then๊ณผ then ์ฌ์ด์๋ ์คํ์ด์ค ๊ฐ๊ฒฉ์ ๋ง์ด ์ฌ์ฉํด๋ ์๊ด์๋ค.
- then์ ์ฒซ๋ฒ์งธ ์ธ์๊ฐ์ผ๋ก ์ ์ ํ๋ก๋ฏธ์ค ์ดํ ๊ฐ(๋ฆฌํด ๊ฐ)์ ๋ฐ๋๋ค.
.then(() => order(2000, () => { console.log("์ฃผ๋ฌธํ์ ์๋ฃ ๋์์ต๋๋ค."); return 11; })) .then((value) => console.log(value));
3. ์๋ฌ ํธ๋ค๋ง
ํ๋ก๋ฏธ์ค์์๋ catch ๋ฉ์๋๋ฅผ ์ฌ์ฉํด์ ์๋ฌ๋ฅผ ํธ๋ค๋งํ๋ค. catch ํธ๋ค๋ฌ๋ ์ค์ง ํ๋ก๋ฏธ์ค๊ฐ reject ๋๋ ๊ฒฝ์ฐ์๋ง ์คํ๋๋ค.
ํ๋ก๋ฏธ์ค ์ดํ ์ค ๋ฌธ์ ๊ฐ ์๊ธฐ๋ฉด ๋ชจ๋ ๊ณผ์ (.then์ผ๋ก ์ด์ด์ง)์ ๋ฌด์ํ๊ณ catch ๊ฐ ์คํ๋๋ค.
.then(() => order(2000, () => console.log("์ฃผ๋ฌธํ์ ์๋ฃ ๋์์ต๋๋ค."))) .catch(() => console.log('customer left'))
4. finally ํธ๋ค๋ฌ
finally ํธ๋ค๋ฌ๋ ํ๋ก๋ฏธ์ค์ resolve, reject ์ฌ๋ถ์ ์๊ด์์ด ๋ชจ๋ .then ๊ณผ์ ์ด ๋๋ ํ ์คํ๋๋ค.
resolved
let is_store_open = true; let order = (time, work) => { return new Promise((resolve, reject) => { if(is_store_open){ setTimeout(() => { resolve(work()); }, time); } else { reject(console.log('the store was closed')); } }); } order(2000, () => console.log("์ฃผ๋ฌธ๋ฐ๊ธฐ ์๋ฃ")) .then(() => order(0000, () => console.log("์ฃผ๋ฌธ์ ๋ฌ ๋ฐ์์ต๋๋ค. ๋ง๋ค๊ธฐ ์์ํฉ๋๋ค."))) .then(() => order(2000, () => console.log("๋ณต์ญ์ํฐ ํ์ฐ๋ ๋ฃ๊ธฐ ์๋ฃ"))) .then(() => order(5000, () => console.log("๋ฐ๋ปํ ๋ฌผ๋ก ํ์ฐ๋ ๋ น์ด๊ธฐ ์๋ฃ"))) .then(() => order(3000, () => console.log("์ผ์ ๋ฃ๊ธฐ ์๋ฃ"))) .then(() => order(2000, () => console.log("๋ฌผ ๋ฃ๊ธฐ ์๋ฃ"))) .then(() => order(0000, () => console.log("๋ค ๋ง๋ค์์ต๋๋ค. ์๋นํด์ฃผ์ธ์."))) .then(() => order(2000, () => console.log("์ฃผ๋ฌธํ์ ์๋ฃ ๋์์ต๋๋ค."))) .catch(() => console.log('customer left')) .finally(() => console.log("ํ๋ก๋ฏธ์ค ์นดํ ์ ๋๋ค."));
rejected
let is_store_open = false; let order = (time, work) => { return new Promise((resolve, reject) => { if(is_store_open){ setTimeout(() => { resolve(work()); }, time); } else { reject(console.log('the store was closed')); } }); } order(2000, () => console.log("์ฃผ๋ฌธ๋ฐ๊ธฐ ์๋ฃ")) .then(() => order(0000, () => console.log("์ฃผ๋ฌธ์ ๋ฌ ๋ฐ์์ต๋๋ค. ๋ง๋ค๊ธฐ ์์ํฉ๋๋ค."))) .then(() => order(2000, () => console.log("๋ณต์ญ์ํฐ ํ์ฐ๋ ๋ฃ๊ธฐ ์๋ฃ"))) .then(() => order(5000, () => console.log("๋ฐ๋ปํ ๋ฌผ๋ก ํ์ฐ๋ ๋ น์ด๊ธฐ ์๋ฃ"))) .then(() => order(3000, () => console.log("์ผ์ ๋ฃ๊ธฐ ์๋ฃ"))) .then(() => order(2000, () => console.log("๋ฌผ ๋ฃ๊ธฐ ์๋ฃ"))) .then(() => order(0000, () => console.log("๋ค ๋ง๋ค์์ต๋๋ค. ์๋นํด์ฃผ์ธ์."))) .then(() => order(2000, () => console.log("์ฃผ๋ฌธํ์ ์๋ฃ ๋์์ต๋๋ค."))) .catch(() => console.log('customer left')) .finally(() => console.log("ํ๋ก๋ฏธ์ค ์นดํ ์ ๋๋ค."));
4. Async / Await ์ฌ์ฉํ๊ธฐ
async / await vs promise
async/await ๊ณผ promise ๋ฅผ ๋น๊ตํด๋ณด๋ฉด ์๋์ ๊ฐ๋ค.
async function
await์ ์ฌ์ฉํ๊ธฐ ์ํด์๋ async function ์ ์ธ์ ํด์ผํ๋ค. async function์ ์ด ํจ์๊ฐ ๋น๋๊ธฐ ํจ์๋ผ๋ ๊ฒ์ ์๋ฏธํ๋ค.
์ฌ์ฉ๋ฒ์ ๊ฐ๋จํ๋ค. ๊ทธ์ function ์์ async ํค์๋๋ฅผ ๋ถ์ด์ฃผ๋ฉด ๋๋ค.
async function example(){ console.log(1); }
await์ ์ฌ์ฉํ์ง ์์ async ํจ์๋ ๋๊ธฐ์ ์ผ๋ก ์๋ํ๋ค.
await
await ์ ์ค์ง async ํจ์ ์์์๋ง ๋์ํ๋ฉฐ, ํ๋ก๋ฏธ์ค๋ฅผ ๋น๋๊ธฐ์ ์ผ๋ก ์ ์ดํ ๋ ์ฌ์ฉํ๋ ์ฐ์ฐ์์ด๋ค.
let promise1 = (value, time) => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(console.log(value)) }, time); }); } let async1 = async () => { await promise1(1, 1000); await promise1(2, 2000); await promise1(3, 3000); } async1();
1. await์ ํ๋ก๋ฏธ์ค๋ฅผ ์ ์ดํ๋ ํค์๋์ด๊ธฐ ๋๋ฌธ์ ๋จผ์ ํ๋ก๋ฏธ์ค๋ฅผ return ํ๋ ํจ์ promise1์ ์ ์ํ๋ค.
2. async ํจ์๋ฅผ ์ ์ธํ๊ณ await์ ํตํด ํ๋ก๋ฏธ์ค๋ฅผ ์คํํ๋ค.
1์ด ๋ค, 1,
2์ด ๋ค, 2
3์ด ๋ค, 3 ์ด ์ฐํ๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
try, catch, finally
try, catch๋ resolve ๋์ ๋, reject ๋์ ๋๋ฅผ ๋๋ ์ค ์ ์๋ ํธ๋ค๋ฌ์ด๋ค.
finally ๋ promise์์์ ์ญํ ๊ณผ ๊ฐ๋ค.
resolve๊ฐ ๋์์ ๋๋ try ๊ตฌ๋ฌธ์ด ์คํ๋๊ณ , reject ๋์์ ๋๋ catch ๊ตฌ๋ฌธ์ด ์คํ๋๋ค.
let promise1 = (value, time) => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(console.log(value)) }, time); }); } let async1 = async () => { try{ await promise1(1, 1000); await promise1(2, 2000); await promise1(3, 3000); } catch(e){ console.log("rejected!"); } finally{ console.log("finally"); } } async1();
.then ํธ๋ค๋ฌ
ํ๋ก๋ฏธ์ค์์ ์ฌ์ฉํ์๋ .then ํธ๋ค๋ฌ ์ญ์ async ํจ์ ๋ค์ ์ฌ์ฉํ ์ ์๋ค.
async ํจ์๋ ํญ์ ํ๋ก๋ฏธ์ค๋ฅผ ๋ฐํํ๊ธฐ ๋๋ฌธ์ Promise.then์ ์ฌ์ฉํ ์ ์๋ ๊ฒ์ด๋ค.
ํจ์ ์คํ(ํ๋ก๋ฏธ์ค ๋ฐํ) + .then ํค์๋
let promise1 = (value, time) => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(console.log(value)) }, time); }); } let async1 = async () => { try{ await promise1(1, 1000); await promise1(2, 2000); await promise1(3, 3000); } catch(e){ console.log("rejected!"); } finally{ console.log("finally"); } } async1().then(() => console.log("then!")); async1();
.then๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก .catch, .finally ๋ชจ๋ ์ฌ์ฉํ ์ ์๋ค.
๋ณต์ญ์ ์์ด์คํฐ async / await ๋ฒ์
let is_shop_open = true; let time = (ms) => { return new Promise((resolve, reject) => { if(is_shop_open){ setTimeout(resolve, ms); } else{ reject(console.log("the store was closed")); } }); } let kitchen = async () => { try{ await time(2000); console.log("์ฃผ๋ฌธ๋ฐ๊ธฐ ์๋ฃ"); await time(0000); console.log("์ฃผ๋ฌธ์ ๋ฌ ๋ฐ์์ต๋๋ค. ๋ง๋ค๊ธฐ ์์ํฉ๋๋ค."); await time(2000); console.log("๋ณต์ญ์ํฐ ํ์ฐ๋ ๋ฃ๊ธฐ ์๋ฃ"); await time(5000); console.log("๋ฐ๋ปํ ๋ฌผ๋ก ํ์ฐ๋ ๋ น์ด๊ธฐ ์๋ฃ"); await time(3000); console.log("์ผ์ ๋ฃ๊ธฐ ์๋ฃ"); await time(2000); console.log("๋ฌผ ๋ฃ๊ธฐ ์๋ฃ"); await time(0000); console.log("๋ค ๋ง๋ค์์ต๋๋ค. ์๋นํด์ฃผ์ธ์"); await time(2000); console.log("์ฃผ๋ฌธํ์ ์๋ฃ ๋์์ต๋๋ค."); } catch(e){ console.log("customer left", e); } finally{ console.log("the store was closed"); } } kitchen();
์ฐธ๊ณ ์๋ฃ
async function - JavaScript | MDN
async function ์ ์ธ์ AsyncFunction๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ ํ๋์ ๋น๋๊ธฐ ํจ์๋ฅผ ์ ์ํฉ๋๋ค. ๋น๋๊ธฐ ํจ์๋ ์ด๋ฒคํธ ๋ฃจํ๋ฅผ ํตํด ๋น๋๊ธฐ์ ์ผ๋ก ์๋ํ๋ ํจ์๋ก, ์์์ ์ผ๋ก Promise๋ฅผ ์ฌ์ฉํ์ฌ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํ
developer.mozilla.org
Promise - JavaScript | MDN
Promise ๊ฐ์ฒด๋ ๋น๋๊ธฐ ์์ ์ด ๋ง์ดํ ๋ฏธ๋์ ์๋ฃ ๋๋ ์คํจ์ ๊ทธ ๊ฒฐ๊ณผ ๊ฐ์ ๋ํ๋ ๋๋ค.
developer.mozilla.org
[JS] ๐ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ฐฑ ํจ์ ๐ฏ ์ด์ ๋ฆฌ
์ฝ๋ฐฑํจ์(Callback Function) ๋? ์ฝ๋ฐฑ์ ๊ฐ๋จํ ๋งํ๋ฉด ํจ์ ์์์ ์คํํ๋ ๋ ๋ค๋ฅธ ํจ์ ์ด๋ค. ๋ ๋ค๋ฅธ ํจ์๋ฅผ ๋ง๋ค ๋ ์ธํ(parameters)์ ํจ์๋ก ๋ฐ์์ ์ฌ์ฉํ ์ ์๋๋ฐ, ์ด ๋ ์ธ์๋ก ์ฌ์ฉ๋๋
inpa.tistory.com
'์๋ฐ์คํฌ๋ฆฝํธ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๐์๋ฐ์คํฌ๋ฆฝํธ 3 | Lexical Environment, Scope Chain (0) 2021.11.15 ๐์๋ฐ์คํฌ๋ฆฝํธ 2 | ์ค์ฝํ(scope), let vs var vs const (0) 2021.11.15 ๐์๋ฐ์คํฌ๋ฆฝํธ 1 | ๊ธฐ๋ณธํ ๋ฐ์ดํฐ์ ์ฐธ์กฐํ ๋ฐ์ดํฐ (0) 2021.11.13 ๐์๋ฐ์คํฌ๋ฆฝํธ 5 | this, 5๊ฐ์ง ๋ฐ์ธ๋ฉ ํจํด (0) 2020.07.21