1. Promise가 무엇인가?
Promise가 도입되기 전에는 자바스크립트에서는 비동기 함수를 처리 할 경우 callback함수를 사용하여
비동기함수를 처리하였다.
하지만 코드가 복잡할 경우 callback hell(콜백지옥)에 빠지게 되므로 가독성 및 코드가 복잡해지기 쉽다.
이런 콜백헬을 해결하기위해 ECMA Script2015(ES6)에서 부터 Promise가 도입되었다.
프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하지는 않고, 대신 프로미스를 반환해서 미래의 어떤 시점에 결과를 제공합니다.
ex)
let promise1 = new Promise((resolve, reject) => {
resolve('go away callback-hell');
// reject('occur error');
});
console.log(promise1)// Promise {<resolved>: "go way callback-hell"}
// 프로미스를 반환함!
promise1.then((res) => {
console.log(res,'res')// 'go away callback-hell' // then()메소드를 사용하여
promise1 변수에 있는 resolve값을 사용
})위에 코드를 하나씩 살펴보면서 개념정리 go!
-. new Promise를 이용하여 Promise객체를 만들고 첫번째 파라미터로 오직하나 callback함수를 사용할 수 있다.
-. callback 함수 안 파라미터로 resolve, reject를 넣을 수 있다.
-. callback 함수 안 정상적으로 수행하고 모든것이 진행되면 resolve를 호출하고 아니라면 reject를 사용하여 처리해주면 된다.
-. 예제에서 보듯이 promise에1에 resolve값이 담기는게 아니라 프로미스를 반환해서 추후 필요시 사용하면 된다.사용법은 Promise.prototype에 있는 then() 메소드를 사용하면된다.
예제대로 코드를 짜고 Promise를 이용한다면 나중에 코드를 짜다가 필요할때마다 promise1에 있는 값을 이용하여 코딩을 할수 있는 장점이 있다.
2. then()메소드
-. then()는 프로미스 객체에서만 사용 가능한 메소드이고 비동기방식이다.(Promise.prototye.then())
-. Promise가 해결(resolve)되었거나 거부(reject)될 때 호출합니다.
-. 두 가지 함수를 매개변수로 사용됨(ex) promise1.then((success) =>{//정상동작 처리부분}, (fail) =>{에처처리부분})
=> 첫번째 함수는 Promise가 완료되고 성공적으로 작업이 완료되면 첫번째 함수가 실행 됩니다.(성공)
=> 두번째 함수는 Promise가 거부되고 에러가 수신되면 두번째 함수가 실행 됩니다.(거부, 옵션적인 부분으로 .catch()를 사용하여 처리를 해도 됩니다)
-. then()메소드의 반환(return)값도 resolve로 처리가 되는것을 확인 할수 있다.(체이닝으로 연결할때)
ex) Promise Rejected
let promise2 = new Promise((resolve, reject) => {
// Promise객체를 만들고 콜백함수의 파라미터로 resolve, reject로 지정!
reject('에러가 발생');
})
promise2
.then((successMessages) => {console.log(successMessages)},
(errorMessages) => {console.log(errorMessages)}); //
// then의 매개변수로 2개를 지정 성공할 경우 첫번째 함수가 실행(successMessages), 실패 할 경우
두번째 함수실행(errorMessages) // output:'에러발생'
ex) Promise는 비동기 방식이고 then()의 리턴값도 resolve상태를 가진다.
const promise1 = new Promise((resolve, reject) => {resolve('resolve됨')});
const promise2 = promise1.then((then1Param) =>{return then1Param});
console.log(promise2) //Promise {<resolved>: "resolve됨"} resolve상태를 가진걸 확인 할 수 있고 체이닝으로 넘겨줄수 있다는것을 확인가능
promise1
.then((then1Param) =>{return `then1 ${then1Param}`})
.then((then2Param) =>{console.log(then2Param, 'then2Parm')})
console.log('promise1 변수뒤에 찍어보았습니다')
// 출력
promise1 변수뒤에 찍어보았습니다
then1 resolve됨 then2Parm
비동기방식임을 확인할 수 있고 return값이 resolve상태인것을 확인함.3. .catch()메소드
위 방법처럼 사용 할 수 있지만 catch()를 사용하여도 에러처리를 할 수 있다.
-. .catch()를 사용하여 에러처리(Promise.prototye.catch())
-. 매개변수로 하나의 함수를 받는다.
-. Promise가 거부되고 에러가 수신되면 실행된다(.then(null, errorHandler) 축약형이라고 볼 수 있다.)
ex) Promise Rejected(2)
let promise2 = new Promise((resolve, reject) => {
// Promise객체를 만들고 콜백함수의 파라미터로 resolve, reject로 지정!
reject('에러가 발생');
})
promise2
.then((successMessages) => {console.log(successMessages)});
.catch((errorMessages) => {console.log(errorMessages)});
// Promise상태가 reject가 된다면 .catch()메소드가 실행된다.
두번째 함수실행(errorMessages) // output:'에러발생'
4. Promise 상태
Promise는 다음 중 하나의 상태를 가집니다.
-. 대기(pending): 이행하거나 거부되지 않은 초기 상태
-. 이행(fulfilled): 연산이 성공적으로 완료됨.
-. 거부(rejected): 연산이 실패함
예제에서 보면 console.log(promise1)// Promise {<resolved>: "go away callback-hell"} 를 보면 정상적으로(fulfilled) resolve가 나왔듯이 처리(완료)된것을 확인 할 수 있다.
5. 주 사용법
-. Promise는 이벤트의 비동기 처리에 사용된다.(콜백헬 해결)
-. http통신할때 사용됨
