Javascript Promise(프로미스는)

# Javascript Promise(프로미스는) ##### [source : https://jsfiddle.net/softm/dofksnw5/ ](https://jsfiddle.net/softm/dofksnw5/) #### 참고 - [https://joshua1988.github.io/web-development/javascript/promise-for-beginners/#promise%EA%B0%80-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%9C%EA%B0%80%EC%9A%94](https://joshua1988.github.io/web-development/javascript/promise-for-beginners/#promise%EA%B0%80-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%9C%EA%B0%80%EC%9A%94) #### 프로미스는? - 프로미스는 자바스크립트 비동기 처리에 사용되는 객체. - 비동기 처리란? - ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다. #### 프로미스는.. - 프로미스는 한 번만 성공 또는 실패할 수 있습니다. 두 번 성공 또는 실패할 수 없으며, 성공을 실패로 전환하거나 실패를 성공으로 전환할 수도 없습니다. - 프로미스가 성공 또는 실패한 후에 성공/실패 콜백을 추가할 수 있습니다. 이벤트가 더 일찍 발생한 경우에도 올바른 콜백이 호출됩니다. - 비동기 성공/실패에 매우 유용합니다 #### 프로미스는 라이브러리 형식으로 존재함. - Q - when - WinJS - RSVP.js ##### ※ Javascript 프로미스는 RSVP.js와 유사함. #### 기존 처리방식 (CallBack)? ```javascript function getData(callbackFunc) { $.get('url 주소/products/1', function (response) { callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 }); } getData(function (tableData) { console.log(tableData); // $.get()의 response 값이 tableData에 전달됨 }); ``` #### 프로미스 처리방식. - resolve 및 reject 등 두 매개변수를 가진 콜백인 단일 인수임. ```javascript function getData(callback) { // new Promise() 추가 return new Promise(function (resolve, reject) { $.get('url 주소/products/1', function (response) { // 데이터를 받으면 resolve() 호출 resolve(response); }); });6 } // getData()의 실행이 끝나면 호출되는 then() getData().then(function (tableData) { // resolve()의 결과 값이 여기로 전달됨 console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨 }); ``` #### 프로미스의 3가지 상태(states) - 상태란 프로미스의 처리 과정을 의미. - new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖습니다. - Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태 - Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 - Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태 - Pending(대기) ```javascript new Promise(function (resolve, reject) { // ... }); ``` - Fulfilled(이행) ```javascript function getData() { return new Promise(function (resolve, reject) { var data = 100; resolve(data); }); } // resolve()의 결과 값 data를 resolvedData로 받음 getData().then(function (resolvedData) { console.log(resolvedData); // 100 }); ``` - Rejected(실패) ```javascript function getData() { return new Promise(function (resolve, reject) { reject(new Error("Request is failed")); }); } // reject()의 결과 값 Error를 err에 받음 getData().then().catch(function (err) { console.log(err); // Error: Request is failed }); ``` #### Promise Chaining ```javascript new Promise(function(resolve, reject){ setTimeout(function() { resolve(1); }, 2000); }) .then(function(result) { console.log(result); // 1 return result + 10; }) .then(function(result) { console.log(result); // 11 return result + 20; }) .then(function(result) { console.log(result); // 31 }); ``` ```javascript ```