π νλ‘λ―Έμ€λ?
- νλ‘λ―Έμ€(Promise)λ λΉλκΈ° μνλ₯Ό κ°μΌλ‘ λ€λ£° μ μλ κ°μ²΄μ΄λ€.
- νλ‘λ―Έμ€λ₯Ό μ¬μ©νλ©΄ λΉλκΈ° νλ‘κ·Έλλ°μ ν λ λκΈ° νλ‘κ·Έλλ° λ°©μμΌλ‘ μ½λλ₯Ό μμ±ν μ μλ€.
π μ½λ°±ν¨ν΄
- μλ°μ€ν¬λ¦½νΈμμλ λΉλκΈ° νλ‘κ·Έλλ°μ ν κ°μ§ λ°©μμΌλ‘
callback
ν¨ν΄μ λ§μ΄ μ¬μ©νλ€.
- μ½λ°± ν¨ν΄μ λΉλκΈ° μμ
μ΄ κΈΈμ΄μ§μλ‘ μ½λ°±μ΄ κΉμ΄μ§κ³ , λν μλ¬ νΈλ€λ§ λ° λλ²κΉ
μ΄ μ΄λ ΅λ€.
function callback() {
asyncFunc1(result => {
asyncFunc2(result => {
asyncFunc3(result => {
asyncFunc4(result => {
asyncFunc5(result => console.log('success!'), result);
}, result)
}, result)
}, result)
})
}
callback();
π νλ‘λ―Έμ€ ν¨ν΄
- μ½λ°±μ λ¬Έμ μ μ ν΄κ²°νκΈ° μν΄
Promise
ν¨ν΄μ΄ λ±μ₯νλ€.
- λΉλκΈ° μμ
μ μ½λ°±μ΄ μλ
then
μΌλ‘ μ°κ²°νκ³ , catch
λ‘ μλ¬ νΈλ€λ§ λ° λλ²κΉ
μ νΈνκ² ν μ μλ€.
function promise() {
asyncFunc1()
.then(result => asyncFunc2(result))
.then(result => asyncFunc3(result))
.then(result => asyncFunc4(result))
.then(result => asyncFunc5(result))
.then(result => console.log('success!'))
.catch(error => console.log('error!'));
}
promise();
π€ νλ‘λ―Έμ€μ 3κ°μ§ μν
- λκΈ°μ€
(pending)
: κ²°κ³Όλ₯Ό κΈ°λ€λ¦¬κ³ μλ μν
- μ΄νλ¨
(fulfilled)
: μνμ΄ μ μμ μΌλ‘ λλ¬κ³ κ²°κ³Ό κ°μ κ°κ³ μλ μν
- κ±°λΆλ¨
(rejected)
: μνμ΄ λΉμ μμ μΌλ‘ λλ μν
- μ΄νλ¨, κ±°λΆλ¨ μνλ₯Ό μ²λ¦¬λ¨
(settled)
μνλΌκ³ λΆλ₯Έλ€.
- νλ‘λ―Έμ€κ° μ²λ¦¬λ¨
(settled)
μνκ° λλ©΄ λμ΄μ λ€λ₯Έ μνλ‘ λ³κ²½λμ§ μλλ€.
promise
λ new
ν€μλλ₯Ό ν΅ν΄ νλ‘λ―Έμ€λ₯Ό μμ±νλ€.
new Promise(resolve, reject);
π resolve, reject
- λΉλκΈ°λ‘ μμ
μ μν ν μ±κ³΅νμ λ
resolve
λ₯Ό νΈμΆνκ³ μ€ν¨νμ λ reject
λ₯Ό νΈμΆ νλ€.
reject
λ₯Ό νΈμΆνλ©΄ κ±°λΆλ¨(rejected)
μνκ° λκ³ , λν ν¨μ μμμ μμΈ(exception)
κ° λ°μνλ©΄ κ±°λΆλ¨(rejected)
μνκ° λλ€.
function promise(data) {
return new Promise((resolve, reject) => {
return !data ? resject('rejected promise!') : resolve(data);
})
}
promise();
π finally
finally
λ©μλλ λΉλκΈ° μμ
μν ν μ±κ³΅ μ€ν¨ μ¬λΆμ μκ΄μμ΄ λ§μ§λ§μ νΈμΆλλ λ©μλμ΄λ€.
function promise() {
return new Promise((resolve, result) => {
})
}
promise()
.then(result => console.log('success!'))
.catch(error => console.log(error))
.finally(() => console.log('finished!'));
π Promise.all
Promise.all
μ μ¬λ¬ κ°μ νλ‘λ―Έμ€λ₯Ό λ³λ ¬λ‘ μ²λ¦¬ν λ μ¬μ©νλ ν¨μμ΄λ€.
Promise.all
ν¨μκ° λ°ννλ νλ‘λ―Έμ€λ μ
λ ₯λ λͺ¨λ νλ‘λ―Έμ€κ° μ²λ¦¬λ¨(settled)
μνκ° λμ΄μΌ λ§μ°¬κ°μ§λ‘ μ²λ¦¬λ¨ μνκ° λλ€.
- λ§μ½ νλλΌλ κ±°λΆλ¨
(rejected)
μνκ° λλ€λ©΄ Promise.all
ν¨μκ° λ°ννλ νλ‘λ―Έμ€λ κ±°λΆλ¨(rejected)
μνκ° λλ€.
function promise1() {
return new Promise((resolve, result) => {
})
}
function promise2() {
return new Promise((resolve, result) => {
})
}
Promise.all([promise1(), promise2()])
.then(result => console.log('result : ', result))
.catch(error => console.log('error!'));
π Promise.race
Promise.race
μ¬λ¬ κ°μ νλ‘λ―Έμ€ μ€μμ κ°μ₯ 빨리 μ²λ¦¬λ νλ‘λ―Έμ€λ₯Ό λ°ννλ ν¨μμ΄λ€.
Promise.race
ν¨μμ μ
λ ₯λ μ¬λ¬ νλ‘λ―Έμ€ μ€μμ νλλΌλ μ²λ¦¬λ¨ μνκ° λλ©΄, Promise.race
ν¨μκ° λ°ννλ νλ‘λ―Έμ€λ μ²λ¦¬λ¨ μνκ° λλ€.
promise1()
ν¨μκ° 3μ΄μμ λ°μ΄ν°λ₯Ό λ°μΌλ©΄ then
λ©μλκ° νΈμΆλκ³ , κ·Έλ μ§ μμΌλ©΄ catch
λ©μλκ° νΈμΆλλ€.
function promise1() {
return new Promise((resolve, result) => {
setTimeout(() => resolve('success!'), 1000);
});
}
function promise2() {
return new Promise((resolve, reject) => setTimeout(reject, 3000));
}
Promise.race([promise1(), promise2()])
.then(result => console.log('result : ', result))
.catch(error => console.log('error!'));
π async await
- νλ‘λ―Έμ€λ κ°μ²΄λ‘ μ‘΄μ¬νμ§λ§
async await
λ ν¨μμ μ μ©λλ κ°λ
μ΄λ€.
π async
async
ν€μλλ₯Ό μ΄μ©ν΄μ μ μλ ν¨μλ async await
ν¨μμ΄λ©°, νμ νλ‘λ―Έμ€λ₯Ό λ°ννλ€.
- νλ‘λ―Έμ€μ
then
λ©μλμ λ§μ°¬κ°μ§λ‘ async await
ν¨μ λ΄λΆμμ λ°ννλ κ°μ΄ νλ‘λ―Έμ€λΌλ©΄ κ·Έ κ°μ²΄λ₯Ό κ·Έλλ‘ λ°ννλ€.
- ν¨μ λ΄λΆμμ μμΈκ° λ°μνλ κ²½μ°μλ κ±°λΆλ¨
(rejected)
μνμΈ νλ‘λ―Έμ€κ° λ°ν λλ€.
async function promise(data) {
if(!data) throw new Error('error!');
return Promise.resolve('success!');
}
promise()
.then(result => console.log(result))
.catch(error => console.log(error))
π await
await
ν€μλλ async await
ν¨μ λ΄λΆμμ μ¬μ©λλ€.
await
ν€μλ μ€λ₯Έμͺ½μ νλ‘λ―Έμ€λ₯Ό μ
λ ₯νλ©΄ κ·Έ νλ‘λ―Έμ€κ° μ²λ¦¬λ¨(settled)
μνκ° λ λκΉμ§ κΈ°λ€λ¦°λ€.
- λ°λΌμ
await
ν€μλλ‘ λΉλκΈ° μ²λ¦¬λ₯Ό κΈ°λ€λ¦¬λ©΄μ μμ°¨μ μΌλ‘ λκΈ°μ μ½λλ₯Ό μμ±ν μ μλ€.
function promise() {
return new Promise((resolve, result) => {
})
}
async function asyncFunc() {
const { data } = await promise({ data: { result: 'success!' } });
console.log('result : ', data);
}
asyncFunc();
π async await
νμ©νμ¬ λΉλκΈ° ν¨μλ₯Ό λ³λ ¬λ‘ μ€ννλ λ°©λ²
- λκ°μ νλ‘λ―Έμ€λ₯Ό λ¨Όμ μμ±νκ³
await
ν€μλλ₯Ό λμ€μ μ¬μ©νλ©΄ λ³λ ¬λ‘ μ€νλλ μ½λκ° λλ€.
Promise.all
μ μ¬μ©νλ©΄ λ κ°λ¨νκ² λ³λ ¬λ‘ μ€νν μ μλ€.
function promise1() {
return new Promise((resolve, result) => {
})
}
function promise2() {
return new Promise((resolve, result) => {
})
}
async function asyncFunc() {
const prom1 = promise1();
const prom2 = promise2();
const data1 = await prom1;
const data2 = await prom2;
const [data3, data4] = Promise.all([prom1, prom2]);
}
asyncFunc();
π async await
μμΈ μ²λ¦¬
async await
ν¨μ λ΄λΆμμ λ°μνλ μμΈλ try/catch
λ¬ΈμΌλ‘ μ²λ¦¬νλκ² μ’λ€.
- λΉλκΈ° ν¨μμ λκΈ° ν¨μμμ λ°μνλ λͺ¨λ μμΈκ°
catch
λ¬Έμμ μ²λ¦¬λλ€.
- λ§μ½
asyncFunc
ν¨μκ° async await
ν¨μκ° μλμλ€λ©΄ doAsync()
ν¨μμμ λ°μνλ μμΈλ ν¨μμ μ²λ¦¬κ° λλλ μμ μ μ μ μκΈ° λλ¬Έμ catch
λ¬Έμμ μ²λ¦¬λμ§ μλλ€.
function doAsync() {
return new Promise((resolve, result) => {
})
}
function doSync() {
}
async function asyncFunc() {
try {
await doAsync();
return doSync();
} catch (error) {
console.log('error', error);
}
}
asyncFunc();
π Thenable
Thenable
μ νλ‘λ―Έμ€ μ²λΌ λμνλ κ°μ²΄μ΄λ€.
async await
λ νλ‘λ―Έμ€κ° μλλλΌλ then
λ©μλλ₯Ό κ°μ§ κ°μ²΄λ₯Ό νλ‘λ―Έμ€μ²λΌ μ·¨κΈνλ€.
ThenableClass
λ then
λ©μλλ₯Ό κ°μ§κ³ μμΌλ―λ‘ ThenableClass
λ‘ μμ±λ κ°μ²΄λ Thenable
μ΄λ€.
async await
ν¨μλ Thenable
λ νλ‘λ―Έμ€ μ²λΌ μ²λ¦¬νλ€.
class ThenableClass {
then(resolve, reject) {
setTimeout(() => resolve('success!'), 1000);
}
}
async function asyncFunc() {
const result = await new ThenableClass();
console.log(result);
}