Promise
Promise객체는 비동기 작업이 완료되거나 실패된 값이다.
MDN Promise
Promise의 필요성
Javascript에서는 거의 모든 작업들이 비동기로 이루어지는데,
실제로 Javascript의 대다수 내장함수 및 함수들은 결과를 콜백을 통해서 알려주는 패턴이 흔하게 사용된다.
초기 Javascrip에서는 Event호출시에 Callback이 나오는 수준이였다면 최근 Javascript에서는 규모가 커져서 Callback이 중첨되는 상황이 나온다.
async(1, () => {
async(2, () => {
async(3, () => {
async(4, () =>{
console.log("Job done")
})
})
})
})이를 위해서 Promise 패턴이 만들어지면서 ES6에 정식으로 포함됐다.
Basic Promise
function getData(cb){
return new Promise(function(resolve, reject) {
$.get('url/suburl', function(response){
resolve(response)
})
})
}
// getData가 실행이 끝난다면 .then이 호출되며 실행된다
getData().then(function(gData){
// resolve 값은 자동으로 then으로 할당된다.
console.log(gData);
}기존에는 콜백함수를 통해 처리된 구조가
new Promise() resolve() then()으로 처리된다.
Promise states
Promise를 사용할때 가장 기본적인개념인Promise의 상태값을 의미한다.
Promise를 생성하고 종료될때까지의 상태값
Pending(대기): 비동기 처리가 완료되지 않은 상태Fulfilled(이행): 비동기 처리가 완료된 상태이며Promise의 결과 값을 반환한 상태Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태
Pending(대기)
new Promise();
//호출을 하게되면 대기 상태가된다.
new Promise((resovle, reject) => {
// .....
})
// 호출을할때 callback이 선언되며 resolve,reject가 Argument이다.Fulfilled(이행)
new Promise((resolve, reject) => {
resolve();
})
// resolve()를 실행하게되면 이행상태로 변경된다.// 이행상태로 돌입되면 then()을통해서 resolve의 값을 받을수 있다.
function getData() {
return new Promose((resolve, reject) =>{
let data = 100;
})
}
getData().then((gdata) => {
console.log(gdata);
})이행 === 완료
Rejected(실패)
new Promise((resolve, reject) => {
reject();
})
// reject를 호출하게 되면 Rejectd상태로 돌입한다.// 또한 실패상태로 바뀌면 실패한이유(에러)를 catch로 받게된다.
function getData(){
return new Promise((resolve, reject) => {
reject(new Error("에러가생김?!"))
})
}
// reject의 결과값의 에러를 받는다.
getData().then().catch((err) => {
console.log(err)
})Promise 예제
import axios from 'axios'
cosnt getData = () => {
try{
return axios.get("https://getdataisgood.data/datas");
} catch (error) {
console.error(error)
}
}
const countData = () => {
const DATAS = getData().then(res => {
if(res.data.title) {
console.log(`제목 : ${title}`)
}
}).catch(err => {
console.log(err);
})
}
countData();
// 위의 getData 결괴에 따라서 res 혹은 err를 출력한다.Promise Chaining(프로미스 연결하기)
Promise의 특징은 여러 개의Promise를 연결해서 사용할 수 있다는 점이다. 앞의 예제에서then()을 호출하면 또 다른Promise객체가 반환된다. 즉, 연결이 가능하다는것이다
function getData(){
return new Promise({
// ReturnDatas...
})
}
// then()으로 연결한다.
getData()
.then(data => {
// ....
})
.then( () => {
// ....
})
.then( () => {
// ....
})
연결 예제
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
});
Promise객체를 하나 생성하고 그 후setTimeout()을 이용해resolve()를 호출하는 예제이다.
resolve()가 호출되면Promise가대기=>이행이 된다.
- 첫번째
then()에서 이행된 결과 값 1을 받아서+10을 한후
- 첫번째
- 두번째
then()에서 11을 받은후+20을 하고
- 두번째
- 세번째
then()에서 최종 결과값 31을 출력한다.
- 세번째
실무에서 사용하는 예제
getData(userInfo)
.then(parseValue)
.then(auth)
.then(display)사용자의 정보를 받아와 파싱,인증등 작업을 하는 코드의 예제이다.
const USER_INFO = {
id : "testman@test.com",
pw : "*********",
}
function parseValue() {
return new Promise({
});
}
function auth() {
return new Promise({
});
}
function display() {
return new Promise({
});
}Promise Error
위의 예제들은 항상 정상적으로 동작한다고 가정한 예제들이다.
실제 서비스를 구현한다면,NetWork ErrorServer Error등으로 인해Error가 발생할 수 있다.
Error처리 방법에는 아래 2가지 방법이 있다.
1. then()의 두번째 인자로 처리하기.
getData().then(
success,
error
)2. catch()로 처리하기.
getData().then().catch();위 2가지 방법 모두
Promise의reject()가 호출되어 실패 상태가 된 경우에 실행된다.
function getData() {
return new Promise(function(resolve, reject) {
reject('failed');
});
}
// 1. then()의 두 번째 인자로 에러를 처리하는 코드
getData().then(function() {
// ...
}, function(err) {
console.log(err);
});
// 2. catch()로 에러를 처리하는 코드
getData().then().catch(function(err) {
console.log(err);
});Promise의 Error처리는 catch()를 사용하자.
두번째 인자로 오류를 잡는다면 첫번째
then()의 콜백함수 내부에서 에러가 난다면Error가 제대로 검출되지 않는다.
하지만 똑같은 오류를 catch()로 처리한다면
두번째 인자로 오류가 나와도
catch()구문에서 잡아낸다.
마무리
ES6문법을 활용한 BE서버 개발자가 될려면 Promise에대한 이해는 필수 불가결인것같다.
비동기와 동기 Promise Async Await는 ES6 javascript의 꽃이자 핵심
참고한곳
Promise란?
Promise의 필요성
