[JavaScript 강의 노트(3)] Promise / async, await

javascript 강의 노트 | Byte Degree [2주차]

 

promise(1/4)

 

- ES6부터 표준내장객체로 추가되었다.

- 생성자를 통해 프로미스 객체를 만들 수 있다.

- 생서자의 인자로 executor 라는 함수를 이용한다.

 

new Promise(/*excutor*/);

 

- executor함수는 resolve와 reject를 인자로 가진다 (resolve, reject) => {...}

 

new Promise(/*excutor*/(resolve, reject)) => {...});

 

- resolve와 reject는 함수이다.

 

- 생성자를 통해 프로미스 객체를 만드는 순간 pending(대기) 상태가 된다.

 

new Promise((resolve, reject)) => {...}); //pending 대기

 

- executor 함수 인자 중 하나인 resolve 함수를 실행하면, fulfilled(이행) 상태가 된다.

 

new Promise((resolve, reject)) => {
    //pending
    //비동기처리
    resolve(); //fulfilled
});

 

- executor 함수 인자 중 하나인 reject 함수를 실행하면, rejected (거부) 상태가 된다.

 

new Promise((resolve, reject)) => {
   reject(); //rejected
});

 

 

- 예시코드 (rexolve 사용하기)

 

1. p 라는 프로미스 객체는 1000ms 후에 fulfilled 된다

 

// promise 객체 만들기
new Promise((resolve, reject) =>{
	/*pending*/
    setTimeout(()=>{
    	resolve(); /*fulfilled*/
    },1000)
})

 

2. p 라는 프로미스 객체가 fulfilled 되는 시점에 p.then 안에 설정한 callback 함수가 실행된다.

 

// promise 객체 사용하기
const p = new Promise((resolve, reject) =>{
	/*pending*/
    setTimeout(()=>{
    	resolve(); /*fulfilled*/ //---> fulfilled상태가 되면 then으로 넘어감
    },1000)
})

p.then(/*callback*/ ()=>{
	console.log("1000ms 후에 fulfilled됩니다.)
})

 

promise(2/4)

 

- then을 성정하는 시점을 정확하게 하고, 함수의 실행과 동시에 promise 객체를 만들면서 pending이 시작되도록 하기 위해 promise객체를 생서하면서 return하는 함수 p를 만들어 함수 p 실행과 동시에 then 을 설정한ㄷㅏ

 

//resolve
function p(){
    return new Promise((resolve, reject) =>{
	/*pending*/
    setTimeout(()=>{
    	resolve(); /*fulfilled*/ //---> fulfilled상태가 되면 then으로 넘어감
    },1000);
   });
}

p().then(()=>{
	console.log("1000ms 후에 fulfilled됩니다.")
})

 

 

- 예시코드 (reject 사용하기)

 

- promise 객체가 rejected되는 시점에 p.catch 안에 설정한 callback 함수가 실행됨

 

//reject
function p(){
    return new Promise((resolve, reject) =>{
	/*pending*/
    setTimeout(()=>{
    	reject(); /*rejected*/ //----> catch로 넘어감
    },1000);
   });
}

p().then(()=>{
	console.log("1000ms 후에 fulfilled됩니다.")
}).catch(()=>{
	onsole.log("1000ms 후에 rejected됩니다.")
})

 

---

-  resolve 인자 넣기

: executor의 resolve 함수를 실행할 떄 인자를 넣어 실행하면, then의 callback 함수의 인자로 받을 수 있다

 

function p(){
    return new Promise((resolve, reject) =>{
	/*pending*/
    setTimeout(()=>{
    	resolve('hello');
    },1000);
   });
}

p().then((message)=>{
	console.log(message); //hello
}).catch(()=>{
	console.log("1000ms 후에 rejected됩니다.")
})

 

 

-reject 인자 넣기

: executor의 resolve 함수를 실행할 떄 인자를 넣어 실행하면, then의 callback 함수의 인자로 받을 수 있다

 

function p(){
    return new Promise((resolve, reject) =>{
	/*pending*/
    setTimeout(()=>{
    	reject('error');
    },1000);
   });
}

p().then((message)=>{
	console.log(message); //hello
}).catch((reason)=>{
	console.log(reason); //error  / 보통 자스에 내장되어있는 error 객체를 넣는게 일반적이다.
})

 

- 보통 자스에 내장되어있는 error 객체를 넣는게 일반적이다.

↓

 

function p(){
    return new Promise((resolve, reject) =>{
	/*pending*/
    setTimeout(()=>{
    	reject(new Error('bad'));
    },1000);
   });
}

p().then((message)=>{
	console.log(message); //hello
}).catch((error)=>{
	console.log(error); //error 객체가 log로 찍힘
})

 

promise(3/4)

 

- fullfilled or rejected 된 후에 최종적으로 실행할 것 => finally()를 설정하고, 함수를 인자로 넣는다.

 

function p(){
    return new Promise((resolve, reject) =>{
	/*pending*/
    setTimeout(()=>{
    	reject(new Error('bad'));
    },1000);
   });
}

p().then((message)=>{
	console.log(message); //hello
}).catch((error)=>{
	console.log(error); //error
}).finally(()=>{
	console.log('end');
})

 

 

- promise없을때의 콜백 함수와 promise 비교

 

//promise없이 callback함수로 비동기작업
function c(calllback){
    setTimeout(()=>{
    	callback();
    },1000);
   });
}

c(()=>{
	console.log("1000ms 후에 callback함수가 실행됩니다.");
})

c(()=>{
   c(()=>{
      c(()=>{
      		console.log("3000ms 후에 callback함수가 실행됩니다.");
      })
   })
})

-----------------------------------------------------------------------------------------
//promise로 비동기작업
function p(){
    return new Promise((resolve, reject) =>{
	/*pending*/
    setTimeout(()=>{
    	resolve();
    },1000);
   });
}

p().then(()=>{
	return p(); //새로운 promise 만들어서 return하기
}).then(()=>{
	return p();   //return 생략가능 RGRG?
}).then(()=>{
	constle.log("3000ms 후에 callback함수가 실행됩니다.")
})

 

 

promise(4/4)

 

+ new Promise 말고 다른 방법으로 promise 만들어보기

- resolve

 

Promise.resolve(/*value*/); value에 들어올 수 있는 값 1. promise 객체 2. 일반 값

//1. promise 객체
Promise.resolve(new Promise((resolve, reject)=>{
	setTimeout(()=>{
    	resolve('foo');
    },1000);
})).then((data)=>{
	console.log("프로미스 객체인 경우, resolve 된 결과를 받아 then이 실행된다." , data); //Promise {<pending>} foo
})

//2. 일반 값
Promise.resolve('bar').then(data=>{
	console.log("then 메서드가 없는 경우 fulfilled됩니다" ,data); //Promise {<fulfilled>: undefined} bar
})

 

- 객체가 promise 객체인지, 일반 객체인지 모를때 유용하게 사용할 수 있다.

 

- reject

 

Promise.reject(/*value*/); catch로 연결된 rejected 상태로 변경된다.

Promise.reject(new Error("reason")).then(data=>{
	/**/
}).catch(error =>{
	console.log(error);
})

 

---

+ Promise.all

- promise객체를 여러개 생성하여, 배열로 만들어 인자로 넣고 Promise.all 실행시, 배열의 모든 promise객체들이 fulfilled 되었을 때, then이 실행된다. then의 함수의 인자로 promise객체들의 resolve 인자값을 배열로 돌려준다

- 모두 fulfilled 되면 진행

 

//Promise.all([프로미스 객체들])

function p(ms){
	return new Promise((resolve, reject)=>{
    	setTimeout(()=>{
        	resolve(ms);
        }, ms);
    });
};

Promise.all([p(1000), p(2000), p(3000)]).then((message)=>{
	console.log("모두 fulfilled된 이후에 실행 됩니다.", message); ///*3초후에*/[1000, 2000, 3000]
})

 

 

+ Promise.race

- Promise.all과 비슷

- 가장 빠른거 먼저 fulfilled되면 바로 then함수 실행

 

//Promise.all([프로미스 객체들])

function p(ms){
	return new Promise((resolve, reject)=>{
    	setTimeout(()=>{
        	resolve(ms);
        }, ms);
    });
};

Promise.race([p(1000), p(2000), p(3000)]).then((message)=>{
	console.log("가장 빠른 하나가 fulfilled된 이후 실행 됩니다.", message); ///*1초후에*/ 1000
})

 

 

async function과 await(1/2)

 

async function 함수이름(){};
const 함수이름 = async ()=>{};

 

//promise 객체를 return하는 함수
//1. promise 객체를 이용해서 비동기 로직을 수행할 때

function p(ms){
	return new Promise((resolve, reject)=>{
    	setTimeout(()=>{
        	resolve(ms)
        }, ms)
    })
}

//promise
p(1000).then(ms => {
	console.log(`${ms}ms 후에 실행된다`);
})

--------------------------------------------------------
//promise 객체를 return하는 함수
//2. promise 객체를 return하는 함수를 async await로 호출하는 방법

function p(ms){
	return new Promise((resolve, reject)=>{
    	setTimeout(()=>{
        	resolve(ms)
        }, ms)
    })
}

//async await
(async function(main){
  const ms = await p(1000);
  console.log(`${ms}ms 후에 실행된다`);
})();

 

-async, await 사용은 로직이 밑으로 흘러가게 할 수 있다는 점이 장점이다

 

//promise 객체를 rejected 된 경우의 처리를 위해 try, catch사용

function p(ms){
	return new Promise((resolve, reject)=>{
    	setTimeout(()=>{
        	//resolve(ms);
            reject(new Error("reason"));
        }, ms)
    })
}

(async function(main){
     try{
      const ms = await p(1000);
    }catch (error){
      console.log(error); 	
    }
})();

 

 

- async function 자체로 promise 사용하기

 

//async function에서 return되는 값은 Promise.resolve 함수로 감싸서 return된다.

function p(ms){
	return new Promise((resolve, reject)=>{
    	setTimeout(()=>{
        	//resolve(ms);
            reject(new Error("reason"));
        }, ms)
    })
}

async function asyncP(){
	return 'Mark';
}

(async function(main){
	try{
      const name = await asyncP();
      console.log(name); 
    }catch (error){
      console.log(error); 	
    }
})();

 

 

async function과 await(2/2)

 

function p(ms){
	return new Promise((resolve, reject)=>{
    	setTimeout(()=>{
        	resolve(ms);
            reject(new Error("reason"));
        }, ms)
    })
}

async function asyncP(){
	const me = await p (1000);
	return 'Mark';
}

(async function(main){
	try{
      const name = await asyncP();
      console.log(name); 
    }catch (error){
      console.log(error); 	
    } finally{
      console.log('end');
    }
})();

 

 

- promise와 async await 비교

 

function p(ms){
    return new Promise((resolve, reject) =>{
    setTimeout(()=>{
    	resolve(ms);
    },ms);
   });
}

//promise VS async await

//promise
p(1000).then(()=>{
	return p(1000);
}).then(()=>{
	return p(1000);
}).then(()=>{
	console.log("3000ms 후에 실행.");
})

---------------------------------------------------------------
//async await

(async function main(){
    await p(1000);
    await p(1000);
    await p(1000);
    console.log("3000ms 후에 실행.");
})();

 

 

async, await의

- promise.all / promise.race

 

function p(ms){
    return new Promise((resolve, reject) =>{
    setTimeout(()=>{
    	resolve(ms);
    },ms);
   });
}

//async await / Promise.all
(async function main(){
	const results = await Promise.all([p(1000), p(2000), p(3000)])
    console.log(results);  //[1000, 2000, 3000]
})();

//async await / Promise.race