자바스크립트 비동기 처리 Promise

 

자바스크립트 비동기 처리 Callback

🤓 Callback 함수를 Promise로 변경

'비동기 처리 Callback'의 방법을 Promise 방법으로 바꾸는 코드는 다음과 같다.

function func1() { return new Promise((resolve, reject) => { setTimeout(()=>{ console.log('1'); resolve(); }, Math.random()*100); }); } function func2() { return new Promise((resolve, reject) => { setTimeout(()=>{ console.log('2'); resolve(); }, Math.random()*100); }); } function func3() { return new Promise((resolve, reject) => { setTimeout(()=>{ console.log('3'); resolve(); }, Math.random()*100); }); } func1() .then(func2) .then(func3);

 

🤓 끝나면 알려줘 - Promise

원하는 순서대로 함수가 호출되도록 비동기 처리를 해결하는 다른 방법은 Promise가 있다.

function func() { return new Promise((resolve, reject) => { setTimeout(()=>{ resolve('나 끝났어'); }, 1000); }); } function func2() { console.log("끝나면 할 일"); } function anotherFunc() { console.log("다른 일"); } func().then((resultValue)=>{ console.log("resultValue: ", resultValue); func2(); //끝나면 할 일 }); anotherFunc(); //다른 일 anotherFunc(); //다른 일

Callback과 동일하게 순서를 제어할 수 있지만, 차이점은 다음 호출할 함수의 제어 방식이다.
Callback함수를 인자로 전달하면 그 함수가 불릴지 여부와 언제 불릴지는 전달 받은 함수에서 모두 결정을 하게 된다.
Promise의 경우는 리턴된 Promise로 제어할 수 있다.

🙄 좀 더 자세히

let success = false; function func() { return new Promise((resolve, reject) => { setTimeout(()=>{ if(success == true) { resolve('완료'); } else { //throw new Error('예외'); reject('실패'); } }, 100); }); } func() .then(result => { console.log(result) }) .catch(err => { console.error(err) }); .finally(()=>{ console.log('마지막'); });

Promise는 resolve와 reject 콜백함수를 호출하여 결과 값을 전달한다.
resolve를 호출하게 되면 그 이후에 then 함수에서 결과 값을 받을 수 있다.
reject를 호출하게 되면 then이 아닌 catch로 받아야 하며, 일반적인 예외(throw)로도 동일하게 처리할 수 있다.
마지막으로 resolve/reject 어느것을 호출하더라도 마지막으로 무조건 호출되게 finally를 이용할 수 있다.

😣 Promise 체이닝 - 콜백 지옥?

function func(temp) { return new Promise((resolve, reject) => { setTimeout(()=>{ resolve(temp); }, 100); }); } func('1 ') .then(result => { return func(result + '2 '); }) .then(result => { return func(result + '3 '); }) .then(result => { return func(result + '4 '); }) .then(result => { return func(result + '5 '); }) .then(result => { return func(result + '6 '); }) .then(result => { return func(result + '7 '); }) .then(result => { return func(result + '8 '); }) .then(result => { console.log(result); });

다음 포스팅에서는 Promise를 좀 더 보기 좋고 편하게 사용할 수 있는 async/await 방법에 대해 알아보자.

자바스크립트 비동기 처리 async/await