[ES6]자바스크립트 ES6 Promise

2018. 6. 25. 15:10javascript/Es6

promise


요즘 nosql과 nodejs등에서 자바스크립트가 중요하게 사용되고 있다. 그러면서 비동기식의 기능을 제공하는 Promise에 대해 정확히 알고 쓰면 좋지 않을 까 하고 글을 적어본다. 


여러분은 이코드들이 어떻게 다른지 알고 있다면 이걸 볼 필요가 없다.  


1.

function f() {
return "sanghoon";
}

function f1(name) {
return "hi "+name;
}

Promise.resolve(f()).then(f1).then(result => {
console.log(result);
});

resolve에서 확실히 값이 호출된 후 f1으로 전달된다. then에는 함수형태만을 전해줄 수 있기때문에 적절한 코드이다. 


2.

function f() {
return "sanghoon";
}

function f1(name) {
return "hi "+name;
}

Promise.resolve(f).then(f1()).then(result => {
console.log(result);
});

여기서는 resolve에서 함수를 호출 해주고 있지 않고 뒤의 then에서는 함수형태가 아니기 때문에 then->null이 되기 때문에 result에는 f가 그저 함수입니다인 [function f]만 전해집니다.  

3.

function f() {
return "sanghoon";
}

function f1(name) {
return "hi "+name;
}

Promise.resolve(f).then(f1).then(result => {
console.log(result);
});

뒤의 then에 함수호출은 적절했지만 앞의 f는 함수만을 전해준 거기 때문에 f1의 name에 function f() {

return "sanghoon";} 이거 전체가 들어가게된다.

4.

function f() {
return "sanghoon";
}

function f1(name) {
return "hi "+name;
}

Promise.resolve(f()).then(f1()).then(result => {
console.log(result);
});


이상황에서는 f()의 반환 값 sanghoon만이 result로 전달되어서 출력된다. f1()는 아무 것도 아니게 된다. 



Promise( resolve, reject)에서는 앞에서 불러줬던 함수가 성공했을 때를 뜻하고 reject는 실패했을 때를 뜻한다. resolve에서는 일반적인 값이 들어 올 수 있지만 then안에서는 무조건 함수가 들어가야한다. 예를 들어 


then(result => {
console.log(result);
});

같이 함수가 들어가거나 함수이름이 들어가야한다. 안그러면 그저 단순히 null으로 변해서 제대로 작동하지 않을 것이다. 이는 2번 상황과 4번상황이 될 것같다. 인자를 추가해주면 이전에 실행했던 함수의 return값이 들어가게 된다. 


그리고 promise가 강력한 이유는 catch를 사용해서 오류를 찾을 수 있기 때문이다. 사용법도 간단하다. 마지막 then에 .catch를 붙여서 사용하면 됩니다. 앞선 함수에서 값을 return해주는게 없다면 다음함수에 undefined가 전달된다. 이는 예상하지못한? 문제들을 충분히 발생 시킬 수 있다. 따라서 무조건 catch문을 써주자. 


catch(err=>{
console.log("err: "+err)
});


그리고 여러개의 비동기식 요청을 하나의 then에서 실행해야 될 때가 있다. 이럴때는 forEach문 보단 promise.all을 사용하면 된다. 


someThingFunction.then(function (result) {
return Promise.all(someThing(function (row) {
return someThing;
}));
}).then(function (arrayOfResults) {
// All docs have really been removed() now!
});

그리고 동기적인 함수가 들어와도 promise가 알아서 처리하기 때문에 전혀 문제없이 비동기적 기능을 사용할 수 있습니다. 

'javascript > Es6' 카테고리의 다른 글

배열의 map 사용해보기  (0) 2018.11.19
[ES6]자바스크립트 ES6 2편  (0) 2018.06.23
[ES6]자바스크립트 ES6 1편  (0) 2018.06.23