반응형
목차
2022.04.20 - [Programming/BACKEND] - Node.JS)04.19( ArrowFunction(화살표 함수) )
1. Promise
- 함수와 비슷한 기능을 갖고 있는 객체.
- 객체 내의 익명함수의 내용을 실행하고, '결과를 보관'하고 있다가, 결과가 필요할 때 전달받아 사용할 수 있게 해주는 구조의 객체.
const pm = new Promise( /* 익명함수 */); //promise 객체의 전달인수 없는 선언문.- promise 객체는 생성자의 전달인수로 현재 promise객체의 기능을 갖는 '익명함수를 전달하여야 생성'된다.
func = (resolve, reject) => { }
const pm = new Promise( func );또는
const pm = new Promise( (resolve, reject ) => { } );
1.1. 전달인수로 전달되는 익명함수의 내용
- 익명함수에서 실행된 결과의 값이나 상태에 따라 resolve( )함수(성공) 또는 reject( ) 함수(실패)를 실행한다.
- 이때 문자로 resolve와 reject에 전달인수로 전달하여 결과가 필요한 곳에서 그 데이터를 꺼내 쓸 수 있게 한다.
- 함수 안에서 반드시 resolve( ) 또는 reject가 호출된다.
- if문이나 선택실행에 적용하여 둘 중 하나만 실행하여도 되고, 무조건 resolve()나 reject() 하나만 실행하기도 한다.
- resolve(성공리턴 값) -> then으로 연결
- reject(실패리턴 값) -> catch로 연결
- finally -> 성공과 실패 리턴값에 상관없이 무조건 실행되는 영역.
let condition = false;
// condition = true;
const pm = new Promise(
// 전달인수는 resolve, reject
(resolve, reject ) => {
if(condition){
resolve('성공');
} else {
reject('실패');
}
}
)
//then과 함께 실행할 처리 이전에 다른 코드가 작성될 수 있다.
console.log('딴짓');
console.log('딴짓');
console.log('딴짓');
console.log('딴짓');
console.log('딴짓');
// 이제 결과를 이용한 작업을 시작한다.
// then과 catch와 finally에 익명함수가 전달인수로 전달되어 실행되게 한다.
// .then( (message)=>{ })
// 매개변수의 이름은 자유롭게 정할 수 있다.
// (message)=>{ } : resolve가 호출되어 도착했을 때 실행될 익명함수이다. message변수에 '성공' 전달
// (error)=>{ } : reject가 호출되어 도착했을 때 실행될 익명함수이다. reject변수에 '실패'전달
// pm.then((message)=>{ }).catch( (error)=>{ }).finally( ()=>{ } );
pm
.then((message)=>{
console.log(message); //성공(resolve)한 경우 실행
}).catch((error)=>{
console.error(error);//실패(reject)한 경우 실행
}).finally(()=>{
console.log('무조건 실행'); //성공,실패중 하나와 함께 반드시 실행된다.
});- (message)=>{ } : resolve가 호출되어 도착했을 때 실행될 익명함수이다. - message변수에 '성공' 전달
- (error)=>{ } : reject가 호출되어 도착했을 때 실행될 익명함수이다. - reject변수에 '실패'전달
1.2. 동기 / 비동기적 처리
- 동기적 처리 : 코드가 위에서 아래로 내려오면서 순차적으로 동작을 수행하는 처리방식.
- A작업이 모두 진행될 때 까지 B작업은 대기해야한다.
- 비동기적 처리 : 비동기적 처리도 마찬가지로 위에서 아래로 순차적으로 동작을 수행하지만,
- A작업이 진행되는 동안, B작업의 진행도 동시에 시작한다.
1.2.1. '동기적 처리'
//동기 실행
console.log('작업 시작');
console.log('작업1 : 오래걸리는 작업');
const wakeUpTime = Date.now() + 3000; //현재 시간에 3초를 더한 값을 wakeUpTime 변수에 저장
while (Date.now() < wakeUpTime){}
//오래걸리는 작업이 올래걸리는 것 처럼 보이게 하기 위해 일부러 시간을 이용한 반복실행을 사용
//계속해서 현재 시간을 wakeUpTime과 비교하여 그보다 커질때까지 반복실행
console.log('작업2 : 오래글리는 작업의 다음 작업');
console.log('작업1, 작업2 순서에 맞춰 작업 끝');
1.2.2. setTimeout( )를 사용하는 '비동기적 처리'
- setTimeout( ) 함수는 대표적인 비동기적 처리 함수이다.
- 앞선 코드가 모두 처리될 때 까지, 다음 코드를 대기시키는 것이 아닌
앞선 코드가 비동기적 처리 함수이기 때문에 이를 담당하는 프로세스로 넘기고, 다음 코드의 처리를 진행한다. - setTimeout( ) 메소드를 처리하는 프로그램은 비동기적 API를 제외한 모든 코드가 실행 된 이후 결과를 콘솔에 찍는 특징이 있다.
// promise를 사용하지 않았을 때 ( 동기식으로 무언가를 실행 => 비동기 명령 삽입 )
const printString = (string, callback) => {
var k = Math.floor(Math.random() * 10000) + 1; //0~9초 사이의 랜덤한 시간 계산 (밀리초)
setTimeout( () => {
console.log(string + ' ' + k);
}, k);
callback();
}
// printString('A', function() => { printString ("B", function()=>{} ); } );
// printString('A', ()=>{});
// printString("B", ()=>{});
printString('A', () => {printString ("B", ()=>{}); } );
//비동기 실행
function longRunningTask(){
console.log('작업1의 내용 모두 종료 후 끝');
}
console.log("시작");
console.log('작업1 : 오래걸리는 작업 시작');
console.log('작업1을 비동기 실행으로 전환!');
setTimeout(longRunningTask, 3000); //setTimeout이 3초후에 longRunningTask함수를 호출한다.
// setTimeout은 비동기 함수이기 때문에 별도의 실행쓰레트가 실행을 담당하고, 현재 쓰레드는 다음 명령으로 실행포커스가 이동한다.
console.log('작업2 : 오래걸리는 작업의 다음작업 시작');
console.log('작업2만 일단 끝!');
1.2.3. Promise를 사용하는 '비동기적 처리'
// Promise로 실행
console.log('시작');
let longRunningTask = new Promise(
(resolve, rejct)=>{
console.log('작업1 : 오래걸리는 작업 시작');
setTimeout( () => {console.log('작업1 : 종료'); }, 3000);
resolve();
}
);
longRunningTask
.then(
() => {
console.log("작업2 : 오래걸리는 작업의 다음작업");
console.log("작업2 : 종료");
}
);
// printString 함수의 리턴값을 promise로 활용
const printString = (string) => {
return new Promise( (resolve, reject)=>{
var k = Math.floor(Math.random()*10000) + 1;
console.log('동기실행 시작');
setTimeout(()=>{
console.log(string + ' ' + k);
}, k);
resolve(); // setTimeout의 실행여부와 상관없이 printString("A").then();로 이동
} );
}
printString("A").then(
() => {
console.log('동기실행 종료1');
printString('B');
}).then(
()=>{
console.log('동기실행 종료2');
}
);
1.2. 연속된 Promise( )의 then과 resolve 사용
// 연속 Promise()의 then과 resolve 사용
const pm1 = new Promise((resolve, reject)=>{
resolve("첫번째 리졸브");
});
pm1
.then((msg1)=>{
console.log(msg1);
return new Promise((resoleve, reject)=>{
resoleve("두번째 리졸브");
});
})
.then((msg2)=>{
console.log(msg2);
return new Promise((resoleve, reject)=>{
resoleve("세번째 리졸브");
});
})
.then((msg3)=>{
console.log(msg3);
})
.catch((error)=>{
console.error(error);
});
2. Promise 예제
2.1. 예제01
숫자 하나를 변수 k에 저장하고,
k가 짝수면 '짝수입니다', 홀수면 '홀수입니다' 라는 텍스트를 결과로 전달하는 promise를 만들고, 결과를 출력하세요.
k가 짝수면 '짝수입니다', 홀수면 '홀수입니다' 라는 텍스트를 결과로 전달하는 promise를 만들고, 결과를 출력하세요.
// 숫자 하나를 변수 k에저장하고,
// 짝수면 '짝수입니다', 홀수면 '홀수입니다' 라는 텍스트를 결과로 전달하는 promise를 만들고,
// 결과를 출력하세요.
const k = 25;
const pm = new Promise((resolve, reject)=>{
if(k%2 == 0){
resolve('짝수입니다.');
} else {
reject('홀수입니다');
}
}
);
pm
.then(
(message)=>{
console.log(message);
})
.catch((error)=>{
console.error(error);
}
);
반응형