221221 - JavaScript - Promise()

오늘 내가 배운 것

1. Promise

2. promise의 핵심

• State
• Producer VS Consumer

3. Promise Chaining

 

 

 

1. Promise

자바스크립트에서 제공하는 오브젝트이고, 비동기를 간편하게 처리할 수 있도록 도와준다.

기능을 수행하고 나서 정상적으로 기능이 작동했다면(resolve) 성공 메세지와 처리된 결과값을 전달해주고,

에러가 발생하면(reject) 에러를 전달해 준다.

 

 

2. promise의 핵심

- State

동작을 수행하고 있는 중인지, 수행을 성공했는지, 수행을 실패했는지 상태를 나타낸다.

•  pending : 동작이 수행중일 때
•  fulfilled : 동작이 성공적으로 끝났을 때
•  rejected : 파일을 찾지 못하거나 네트워크에 문재가 생겨서 실패했을 때

- Producer VS Consumer

• Producer == 제작 코드(producing code)

//Promise는 클래스이기 때문에 new 키워드를 이용하여 object를 생성
const promise = new Promise((resolve, reject)=>{
    //시간이 좀 걸리는 무거운 작업
})

시간이 걸리는 무거운 작업을 동기적으로 처리하게되면, 작업이 오래걸리는 부분을 실행하느라 뒷부분이 실행이되지 않기 때문에,
시간이 조금 걸리는 작업을 promise를 이용하여 비동기적으로 처리하는 것이 좋다.

프로미스를 생성하게되면, 자동적으로 콜백함수가 실행되게 된다.(pending 상태가 된다.)

const promise = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve('OK')
    }, 2000)
})

2초정도 뒤에 동작이 성공적으로 끝나면, resolve 함수를 실행시켜 OK라는 값이 출력되게 한다.

 

 

• Consumers == 소비 코드(consuming code) 
  • then(성공), catch(실패), finally(any)

promise.then((value)=> {
    console.log(value)
})

프로미스가 정상적으로 잘 수행 되어서 resolve에 의해 전달된 값이 value의 값으로 전달된다.

//1. producer
const promise = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        reject(new Error('no network'))
    }, 2000)
})
//2. consumers
promise
    .then((value)=> {
        console.log(value)
    })
    .catch((error)=>{
        console.log(error)
    })//실패시 error를 발생한다.

 

state

"pending"(보류)이었다가
resolve가 호출되면 "fulfilled", reject가 호출되면 "rejected" 로 바뀐다.

 

result 

undefined이었다가
resolve(value)가 호출되면 value,reject(error)가 호출되면 error로 바뀐다.

 

 

3. Promise Chaining

const fetchNumber = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve(1), 1000
    })
})
fetchNumber
.then(num => num * 2) //2
.then(num => num * 3) //6
.then(num => {
    return new Promise ((resolve, reject)=>{
        setTimeout(()=>resolve(num-1),1000)       
    })
})  //2초뒤 5 출력.

 consuming code 호출시 콜백함수의 특징

호출시 인자값 값을 전달 할 수도 있고, promise를 전달 할 수 있다.
콜백함수로 전달할 때, 받을 값을 그대로 다른 함수로 넣게 된다면 값을 생략할 수 있다.

.then(hen => getEgg(hen)) === .then(getEgg) 
// 사용하는 것이 자연스러워 질 때 사용해보자..

//ex
getHen()
    .then(hen => getEgg(hen))
    .then(egg => cook(egg))
    .then(meal => console.log(meal))
//아래와 같다.
getHen()
    .then(getEgg)
    .then(cook)
    .then(console.log)

예외처리하기 에러핸들링

체인 마지막의 .catch는 try..catch와 유사한 역할을 한다. 
.then 핸들러를 원하는 만큼 사용하다가 마지막에 .catch 하나만 붙이면 .then 핸들러에서 발생한 모든 에러를 처리할 수 있습니다.

 

.catch 특징

.catch는 첫 번째 핸들러일 필요가 없고, 하나 또는 여러개의 .then 뒤에 올 수 있다.

.then()
.then()
.then()
.catch()

정상적인 경우라면 .catch는 절대 실행 할 수 없지만, 네트워크 문제 등 promise 중에 한개라도 실패를 하게 되면 .catch에서 에러 잡게 된다.

 

 

 

 

---

참고 :

모던자바스크립트 : https://ko.javascript.info/async

드림코딩 엘리 : https://youtu.be/JB_yU6Oe2eE