JS 심화_02 (Promise)

Promise

Promise object

• 비동기 작업의 최종 완료 또는 실패를 나타내는 객체

  • 미래의 완료 및 실패와 그 결과 값을 나타냄
  • 미래의 어떤 상황에 대한 약속

• 성공(이행)에 대한 약속

  • .then()

• 실패(거절)에 대한 약속

  • .catch()

Promise의 상태

• 대기 (pending)

  • 이행하거나 거부되지 않은 초기 상태

• 이행 (fullfilled)

  • 연산이 성공적으로 완료됨

• 거부 (rejected)

  • 연산이 실패함

 

Promise methods

• .then(callback)

  • 이전 작업(이 또한 promise 객체)이 성공했을 때(이행했을 때) 수행할 작업을 나타내는 콜백 함수
  • 각 콜백 함수는 이전 작업의 성공 결과를 인자로 전달 받음
  • 따라서 성공했을 때의 코드를 콜백 함수 안에 작성

• .catch(callback)

  • .then()이 하나라도 실패하면(거부 되면) 호출됨 (동기식의 'try ... catch' 구문과 유사)
  • 이전 작업의 실패로 인해 생성된 error 객체는 .catch() 블록 안에서 사용할 수 있음

• 각각의 .then() 블록은 서로 다른 promise 객체를 반환

  • 즉, .then()을 여러개 사용(chaining)하여 연쇄적인 작업을 수행 가능
  • 결국 여러 비동기 작업을 차례로 수행할 수 있다는 의미

• .then()과 .catch() 메서드 모두 promise를 반환하기 때문에 chaining이 가능한 것

• 주의

  • 반환값이 반드시 있어야 함
  • 없다면 콜백 함수가 이전의 promise 결과를 받을 수 없음

• .finally(callback)

  • Promise 객체를 반환

  • 결과와 상관없이 무조건 지정된 콜백 함수를 실행

  • 어떤 인자도 전달 받지 않음

    • Promise가 성공되었는지 거절되었는지 판단할 필요가 없기 때문

  • 무조건 실행되어야 하는 절에서 활용

    • .then()과 .catch() 블록에서의 코드 중복을 방지

Promise 기본 구조

const myPromise = new Promise ((resolve, reject) => {
  // 일련의 동작을 수행
    
  // 이행했을 경우
  // resolve()
  
  // 거부된 경우
  // reject()
})


// 예시

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open("GET", url)
    xhr.onload = () => resolve(xhr.responseText)
    xhr.onerror = () => reject(xhr.statusText)
    xhr.send()
  })
}

new Promise(executor)

• 실행함수의 executor는 Promise 생성자가 객체를 반환하기도 전에 호출된다

  • 즉, Promise가 만들어지는 순간에 executor 함수를 실행
  • 콜백 함수 executor는 함수 인자로 resolve와 reject 함수를 인자로 받음

• resolve는 Promise가 이행했을 경우
• reject는 거부됐을 경우

• 위에서 언급했던 3가지 상태 (이행, 거부, 대기)에 따라 promise 메서드를 호출하여 다음과 같이 사용 가능

const myPromise = new Promise((resolve, reject) => {
    setTimeout(function() {
        resolve('성공')
    }, 300)
})

myPromise
  .then(function (response) {          // 이행의 경우
    console.log(response + '하면 출력')	// '성공하면 출력'
  })
  .catch(function (error) {                      // 거절의 경우
    console.log(error + ' 이런 이유로 실패했어요')  // '<발생된 에러> 이런 이유로 실패했어요'
  })
  .finally(function () {
    console.log('결과와 상관없이 출력 됩니다.')  // 무조건 출력
 })

Promise가 보장하는 것

• Async callback 작성 스타일과 비교하여 Promise의 특징

  1. 콜백은 자바스크립트 Event Loop가 현재 실행중인 콜 스택을 완료하기 이전에는 절대 호출되지 않음

     • Promise 콜백은 event queue에 배치되는 엄격한 순서로 호출됨

  2. 비동기 작업이 성공하거나 실패한 뒤에 .then() 메서드를 이용하여 추가한 경우에도 1번과 똑같이 동작

  3. .then()을 여러번 사용하여 여러개의 콜백을 추가할 수 있음 (Chaining)

     • 각각의 콜백은 주어진 순서대로 하나하나 실행하게 됨
     • Chaining은 Promise의 가장 뛰어난 장점