기본 사용법
1
2
3
4
5
6
7
8
9
10
11
12
| const a = (_param) => new Promise((resolve, reject) => {
if (_param < 10) {
return reject(new Error('10보다 작다'));
}
return resolve('10보다 크다.');
});
a(10).then((result) => {
console.log('result', result);
}).catch((e) => {
console.log('err', e);
});
|
정상적으로 처리가 되엇을 땐 resolve()에, 에러 등 처리는 reject()로 넘기면 된다.
기존 콜백 방식보다 코드 읽기도 편하고, 에러 처리도 편해서 깔끔하다고 느낀다.
순차적인 처리 방법.
1
2
3
4
5
6
7
8
9
10
11
| const a = (_param) => new Promise((resolve) => {
resolve(_param);
});
const b = (_param) => new Promise((resolve) => {
resolve(_param + 10);
});
const c = (_param) => new Promise((resolve) => {
resolve(_param + 100);
});
|
이런 함수가 잇을 때 호출하는 순서대로 처리를 하려면 다음과 같이 쓰면 된다.
1
2
3
| a(1).then((A) => b(A).then((B) => c(B).then((result) => {
console.log('result', result);
})));
|
지금이야 몇개 업지만서도 호출하는 함수가 더 추가 되면 코드 읽기가 불편할 꺼 같다.
이런 문제를 해결하기 위해 async/await를 사용 하면 좀 더 간단하게 작성 할 수 잇다.
위와 동일한 코드이다.
1
2
3
4
5
6
7
8
9
| a(10).then(async (A) => {
try {
const B = await b(A);
const result = await c(B);
console.log('result', result);
} catch (e) {
console.log('e', e);
}
});
|
최상단에 async란 키워드가 잇어야 await를 사용할 수 잇다. 기존의 .then(), .catch()가 업어지고
변수에 각 상황에 따라 할당이 되므로 try / catch 구문으로 처리를 해야 한다. 현재 예에서는 에러가 발생할 일은 업겟지만..
병렬 처리
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| const a = () => new Promise((resolve) => {
resolve(10);
});
const b = () => new Promise((resolve) => {
resolve(100);
});
const c = () => new Promise((resolve) => {
resolve(1000);
});
Promise.all([a(), b(), c()]).then((results) => {
console.log('results - 1', results);
});
const x = async () => {
try {
const results = await Promise.all([a(), b(), c()]);
console.log('results - 2', results);
} catch (error) {
console.log('err', error);
}
};
x();
|
Promise.all()을 사용 하면 된다. 결과는 배열로 받게 된다.
마찬가지로 상위 함수에 async가 붙어야 await로 함수를 실행 할 수 잇다.
race
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
const a = () => new Promise((resolve) => {
const random = Math.floor(Math.random() * 3) + 1;
setTimeout(() => {
console.log('a', 10);
resolve(10);
}, random);
});
const b = () => new Promise((resolve) => {
const random = Math.floor(Math.random() * 3) + 1;
setTimeout(() => {
console.log('b', 100);
resolve(100);
}, random);
});
Promise.race([a(), b()]).then((result) => {
console.log('result - 1', result);
});
const x = async () => {
try {
const result = await Promise.race([a(), b()]);
console.log('result - 2', result);
} catch (e) {
console.log('e', e);
}
};
x();
|
이 기능은 좀 신기햇는데 아직 일하면서 써보진 않앗다.
어떠한거냐면 all처럼 동시에 실행을 하는데 먼저 처리된 함수의 결과가 넘어 온다. 그렇다고 나머지 함수가 실행이 안되는 건 아니다. 아직은 어떤 때 사용하는 게 좋을지 생각이 잘 안 난다.
참고
