[JavaScript] 비동기 처리 - Promise

 JavaScript에서 비동기 처리는 전 게시글에 나온 콜백 함수를 통해서 처리를 했지만, 콜백 함수가 중첩 되어서 계속 호출해야하는 복잡한 코드의 경우는 계속 들여쓰기를 사용을 하여도, 코드의 가독성이 현저하게 떨어지게 되는 콜백 지옥이 발생이 됩니다.

해당 문제를 해결하기 위해 Promise를 사용하게 되었습니다.

 

Promise란?

Promise는 현재에는 당장 얻을 수 없지만 가까운 미래에 얻을 수 있는 데이터에 접근하기 위한 방법을 제공한다.

 

Promise 생성 방법

아래와 같이 Promise 객체를 생성하는 데, 보통은 변수에 할당 하는 것이 아닌, 함수의 리턴 값으로 사용하는 경우가 많다.

const promise = new Promise((resolve, reject) => {})

 

Promise 객체는 resolve와 reject 함수를 호출을 하게 된다. 

resoleve()는 정상 처리를 하게 되어, 미래 시점에 얻게 될 결과를 넘겨준다.

reject()는 미래 시점에 발생할 예외를 넘겨준다.

function promise() {
  return new Promise((resolve, reject) => {})
}

 

Promise 예제

// getStudent 함수 호출, 호출이 끝나면 then() 실행
getStudent("PINO", 22)
  .then((student) => {
      console.log(`학생의 이름은 ${student.name}이고, 나이는 ${student.age}살 이다.`)
  })
  .catch(err => console.log(err))
/*
* 결과
* Wait 0.1 sec
* 학생의 이름은 PINO이고, 나이는 22살 이다.
*/

getStudent(null, 22)
  .then((student) => {
      console.log(`학생의 이름은 ${student.name}이고, 나이는 ${student.age}살 이다.`)
  })
  .catch(err => console.log(err))
/*
* 결과
* Undefined Name
*/


// name, age를 매개 변수로 받음.
function getStudent (name, age) {
	// promise 객체를 생성(resolve, reject 존재) 후 리턴함.
    
    return new Promise((resolve, reject) => {
    
        //받은 name, age를 student 객체에 저장을 0.1초 후에 실행
        setTimeout( () => {
            console.log("Wait 0.1 sec")
            // 만약에 name 값이 없으면 reject()으로 에러 예외 처리
            if(!name) reject(new Error("Undefined Name"))
            student = {
                name : name,
                age : age
            }
            // resolve를 이용한 정상 호출 처리, student 객체를 넘겨줌
            resolve(student)
        }, 100)
    })
}