* 동기(Synchronous), 비동기(Asynchronous) ?
--> 동기적 처리는 요청(REQUEST)에 대한 응답(RESPONSE)을 받을 때까지 다른 작업을 수행 할 수 없다.
하나의 작업이 수행되는 동안 다른작업들은 대기상태가되며 순차적으로 처리된다. 반면에 비동기적 처리는 요청에 대한 응답결과와 관계없이 여러작업을 동시적으로 수행이 가능하며, 기다리는 과정에서 다른함수 호출도 가능하다.
* Javascript Promise (ES6) ?
--> 자바스크립트의 비동기처리 방식이며, 객체형태로 선언 및 사용된다. "new Promise();"
프로미스(Promise)는 수행결과에 따른, CallBack함수(성공, 실패) 분기처리가 가능하다.
* Promise States ?
| Pending(대기) | 비동기처리 로직이 완료되지 않은 대기상태 |
| Fulfilled(이행) | 비동기처리 로직이 완료된 상태 |
| Rejected(거부) | 비동기처리 실패 또는 오류가 발생한 상태 |
* Promise 구조 ?
--> 생성자를 통해서 Promise객체를 만든다. 인자로 Executor Function을 선언한다.
new Promise( Executor Function ); * 생성자를 통하여 프로미스 객체생성시, pending(대기상태).
| Executor Function: 콜백함수(CallBack Function)이며 2개의 파라미터 "resolve", "reject"를 가진다. - resolve : 프로미스 상태를 Fulfilled(이행) 상태로 변경하는 함수 - reject : 프로미스 상태를 Reject(거부) 상태로 변경하는 함수 Cf). (resolve, reject) => { // resolve 펑션수행시 Fulfilled.. 상태로 진입 resolve(); // reject 펑션수행시 Reject.. 상태로 진입 reject(); } .then(CallBackFn) :: Fulfilled되었을시 호출되는 SuccessFn .catch(CallBackFn) :: Reject되었을시 호출되는 FailFn |
(Asynchronous) Promise Exercise..
| // Promise 객체생성 -- Pending(대기) 상태. new Promise((resolve, reject) => {}); // resolve함수 실행 , Fulfilled(이행) 상태. new Promise((resolve, reject) => { resolve(); }); // reject함수를 실행 , Rejected(거부) 상태. new Promise((resolve, reject) => { reject(); }); // 프로미스객체 3000ms(==3Sec) 이후, Fulfilled(이행) 상태. const pObj = new Promise((resolve, reject) => { /** pending.. (대기상태) */ setTimeout(() => { resolve(); }, 3000); }); // 프로미스 결과 - Fulfilled(이행) CallBack Function수행.. pObj.then(() => { console.log('Promise Fulfilled..!..'); console.log('Success Return.. After 3Sec'); }); // 프로미스객체 5000ms(==5Sec) 이후, Rejected(거부) 상태. function createPromise() { return new Promise((resolve, reject) => { /** pending.. (대기상태) */ setTimeout(() => { reject(); }, 5000); }); } // 프로미스 결과 - Rejected(거부) CallBack Function수행.. createPromise() .then(() => { // CallBack - SuccessFn console.log('Promise Fulfilled..!'); }) .catch(() => { // CallBack - FailFn console.log('Promise Rejected..!'); }); |
| // 프로미스객체 1000ms(==1Sec) 이후, Fulfilled(이행) 상태. function createPromise2() { return new Promise((resolve, reject) => { /** pending.. (대기상태) */ setTimeout(() => { resolve('Hello Promise..'); // reject('Biz Error!!'); }, 1000); }); } // 프로미스 결과 - Fulfilled(이행) CallBack Function수행.. // msg == "Hello Promise" createPromise2() .then((msg) => { // CallBack - SuccessFn console.log('Promise Fulfilled..! / SendingMessage : ', msg); }) .catch((errMsg) => { // CallBack - FailFn console.log('Promise Rejected..! / SendingErrMsg : ', errMsg); }) .finally(() => { console.log('Always Execute..'); }); // 프로미스객체 1000ms(==1Sec) 이후, Rejected(거부) 상태. function createPromise3() { return new Promise((resolve, reject) => { /** pending.. (대기상태) */ setTimeout(() => { reject(new Error('errorObject Foward.. ErrorMsg')); }, 1000); }); } // 프로미스 결과 - Rejected(거부) CallBack Function수행.. // ErrorObject // { message : "errorObject Foward.. ErrorMsg" } createPromise2() .then(() => { // CallBack - SuccessFn console.log('Promise Fulfilled..!'); }) .catch((error) => { // CallBack - FailFn console.log('Promise Rejected..! / SendingErrMsg :', error.message); }); |
| ----------- Function (재귀: Recursive) function repeatFn(callbackFn) { setTimeout(() => { callbackFn(); }, 1000); } // 익명 CallBack Function repeatFn(() => { console.log('After 1Sec.. Execute'); }); repeatFn(() => { repeatFn(() => { repeatFn(() => { console.log('After 3Sec.. Execute'); }); }); }); ----------- Promise (재귀: Recursive) function repeatPromise() { return new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, 1000); }); } // 프로미스가 연속적으로 호출된다. repeatPromise() .then(() => { return repeatPromise(); }) .then(() => repeatPromise()) .then(repeatPromise) .then(() => { console.log('After 4Sec.. Execute'); }); |
'FrontEnd_JavaScript' 카테고리의 다른 글
| [JavaScript] 배열 내장함수(Array Methods) (0) | 2021.09.29 |
|---|---|
| [JavaScript] 함수(Function) 선언 및 활용. (0) | 2021.09.22 |