2018. 6. 25. 15:10ㆍjavascript/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 |