const promise = new Promise((resolve, reject) => {
console.log('Execute Promise');
setTimeout(() => {
resolve('Alex');
// reject(new Error('network failed'));
}, 2000);
});
promise
.then((value) => {
console.log(value);
})
.catch(error => {
console.log(error);
})
.finally(() => {
console.log(`Promise finish`)
})
Promise를 선언할때 선언과 동시에 내부가 동작되는것을 알수 있다. 만약 선언후 나중에 통신을 할려고 하면 그때 선언하는 것이 리소스 관리상 유리하다.
.then : resolve가 실행 될시 전달인자(value)를 반환한다.
.catch : reject가 실행 될시 전달인자(error)를 반환한다.
-> 만약 .catch가 없이 reject가 실행시 아래와 같이 반환한다.
.finally : 만약 모든 과정이 끝나면 에러 유무와 상관 없이 finally가 실행된다.
const passOrfailed = () => {
return new Promise((res, rej) => {
return 'pass';
})
}
const result = passOrfailed();
console.log(result);
위 코드에서 함수 passOrfailed는 res, rej를 사용하지 않고 바로 'pass'를 리턴하였다. 이때 실제 변수 result에 들어간 값을 확인하면 아래 사진과 같다.
변수 result는 문자열이 아닌 Promise의 pending 상태이다. 이는 대기 상태라는 뜻이다. 통과 혹은 거절이 결정되지 않은 상태인 것이다. 따라서 pending상태를 방지하기 위해서는 반드시 respond 또는 reject를 사용해야한다.
const passOrfailed = () => {
return new Promise((res, rej) => {
res('pass');
})
}
const result = passOrfailed();
console.log(result);
이제 코드를 변경하여 res를 통해서 pass를 넘기도록 하겠다. 이때 콘솔의 결과를 확인하면 아래와 같다.
결과를 보면 fulfilled를 볼수 있다. 이는 충족했다는 뜻으로 문자열 pass를 전달할수 있다는 뜻이다. 이제 실제적으로 이 res값을 빼야한다. 결과가 문자열이기 때문에 문자열 변수에 담아야 한다.
const passOrfailed = () => {
return new Promise((res, rej) => {
res('pass');
})
}
const result = passOrfailed();
let strResult = '';
result.then((ele) => strResult = ele);
위 코드에서 result.then 이후에 strResult변수에 pass를 입력하는 것을 알수 있다. 그리고 실제 콘솔창에서 strResult를 확인하면 아래와 같다.
const checkStr = new Promise((resolve, reject) => {
setTimeout(() => resolve('apple'), 1000);
});
checkStr
.then(char => char + ' is good')
.then(char => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(char + ' and expensive'), 2000);
});
})
.then(char => console.log(char));
1번 : Promise checkStr을 선언한다. 1초 후에 문자열 'apple'를 resolve에 전달한다.
2번 : checkStr에서 문자열(char) 'apple'를 전달 받고 ' is good'문자열을 추가한 다음 반환
3번 : 2번 then에서 반환한 문자열(char)을 받고 새로운 Promise를 반환한다. 새 Promise는
2번의 문자열에 ' and expensive'를 추가하고 2초후에 반환한다.
4번 : 3번에서 반환한 문자열을 console.log로 출력한다.
댓글
댓글 쓰기