먼저 들어가기 전에 가장 기본적으로 알아야 할 것
promise의 경우, promise 의 콜백함수 안에 동기처리 하고싶은 비동기 처리를 담는 것이라는 점입니다.
콜백의 경우, 비동기가 예상되는 함수A의 인수로써 그 이후에 처리되어야 하는 함수B를 넣으므로, A->B처리되게 하는 것
//선언부
const func1 = function() {
return new Promise(function(resolve, reject){
...(동기처리 하고 싶은 비동기 처리)...
});
};
function A(callback){
...
callback(param1,param2);
}
1.then() 메서드는 Promise를 리턴하고 두개의 콜백 함수를 인수로 받습니다. 이때, 인수로 들어온 콜백함수의 리턴값이 promise객체일 때, then()이 콜백함수의 리턴값인 promise객체를 받습니다.
[이상경우]
//선언부
const func1 = function() {
return new Promise(function(resolve, reject){
setTimeout(function(){
console.log('a');
resolve();
//reject('func1 fail');
}, 2000);
});
};
const func2 = function() {
return new Promise(function(resolve, reject){
setTimeout(function(){
console.log('b');
resolve();
//reject('func2 fail');
}, 3000);
});
};
const func3 = function() {
console.log('c');
};
//실행부func1()
.then(func2())
.then(func3)
//기대치는 a b c인데 a c b 반환
//then의 파라미터는 함수가 들어가야 하는데, func2()는 promise객체이기 때문에 .then(func2())이 작동하지 않음
[정상경우]
//선언부
const func1 = function() {
return new Promise(function(resolve, reject){
setTimeout(function(){
console.log('a');
resolve();
//reject('func1 fail');
}, 2000);
});
};
const func2 = function() {
return new Promise(function(resolve, reject){
setTimeout(function(){
console.log('b');
resolve();
//reject('func2 fail');
}, 3000);
});
};
const func3 = function() {
console.log('c');
};
//실행부func1()
.then(func2)
.then(func3)
// a b c 반환
func1()
.then(function(){return func2()})
.then(func3)
// a b c 반환
func1()
.then(function(){func2()})
.then(func3)
// a c b반환
// function(){func2()}는 return값이 없기때문에 제대로 작동하지 않는다.
2. .then() 메서드의 파라미터 두개중, 하나는 Promise가 성공(success)했을 때를 위한 콜백 함수이고, 다른 하나는 실패(failure)했을 때를 위한 콜백 함수입니다.
promise 선언부에서 resolve 콜백함수를 두고, 이 콜백함수를 정의하는 부분이 then(resolve,reject)에서 resolve부분입니다. 따라서, then(resolve,reject)에서 resolve를 정의하기 위해선 선언부의 resolve콜백함수는 필수적으로 존재해야합니다.
//선언부
const func1 = function() {
return new Promise(function(resolve, reject){
setTimeout(function(){
console.log('a');
//resolve();
//reject('func1 fail');
}, 2000);
});
};
const func2 = function() {
return new Promise(function(resolve, reject){
setTimeout(function(){
console.log('b');
//resolve();
//reject('func2 fail');
}, 3000);
});
};
const func3 = function() {
console.log('c');
};
//실행부
func1()
.then(func2)
.then(func3)
//기대값은 a b c 인데 a만 반환된다
//resolve()함수가 선언되지 않았기 때문에, 시행되지 않기 때문이다.
3.
const func1 = (num) => {
return new Promise((resolve,reject) => {
setTimeout(() => {
console.log('a');
resolve(num);
}, 3000);
});
};
const func2 = (num) => {
return new Promise((resolve,reject) => {
setTimeout(() => {
console.log('b');
resolve(num * num);
}, 2000);
});
};
const func3 = (num) => {
return new Promise((resolve,reject) => {
setTimeout(() => {
console.log('c');
resolve(num * num * num);
}, 2000);
});
};
//실행부1
func1()
.then(func2)
.then(func3)
.then((result)=>{console.log(result)})
//실행부2func1(2)
.then((result)=>{
func2(result).then((result) => {
func3(result).then((result)=>{
console.log(result);
});
})
})
4. then자체는 비동기 처리가 되는 함수이다.
func1, func2, func3를 순서대로 동기처리 하기 위해서는 promise 체인 안에 세 함수를 위치시켜야 한다.
동일한 promise 체인안에 위치하는 func1과 func2는 동기 처리 되지만, func3는 동일한 promise체인 안에 존재하지 않으므로
1. 비동기적으로 func3의 결과를 반환 후
2. func1 -> func2의 결과를 반환한다.
//선언부
const func1 = function() {
return new Promise(function(resolve, reject){
setTimeout(function(){
console.log('a');
resolve();
//reject('func1 fail');
}, 2000);
});
};
const func2 = function() {
return new Promise(function(resolve, reject){
setTimeout(function(){
console.log('b');
resolve();
//reject('func2 fail');
}, 3000);
});
};
const func3 = function() {
console.log('c');
};
//실행부func1()
.then(func2)
func3()
// c a b 반환
//then의 파라미터는 함수가 들어가야 하는데, func2()는 promise객체이기 때문에 .then(func2())이 작동하지 않음
