[JS CS] Promise, axios, async-await

Promise

Promise object와 method

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

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

성공(이행)에 대한 약속

• .then(callback)
• 이전 작업(promise)이 성공했을 때 수행할 작업을 나타내는 callback 함수
• 각 callback 함수는 이전 작업의 성공 결과를 인자로 전달 받음
• 성공했을 때의 코드를 callback 함수 내에 작성
• 코드가 피라미드 형태로 들어가지 않아 깊이를 얕게 유지

실패(거절)에 대한 약속

• .catch()
• .then이 하나라도 실패하면(거부되면) 동작(동기식의 ‘try-except’ 구문과 유사)
• 이전 작업의 실패로 인해 생성된 error 객체는 catch 블록 안에서 사용 가능

• 각각의 .then() 블록은 서로 다른 promise 반환
• 즉, .then()을 여러 개 사용(chaining)하여 연쇄적인 작업을 수행 가능

• 결국 여러 비동기 작업을 차례대로 수행할 수 있다는 뜻

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

주의사항

1. 반드시 반환값이 있어야 함
2. 없다면 callback 함수가 이전의 promise 결과를 받을 수 없음

.finally(callback)

• Promise 객체를 반환
• 결과와 상관없이 무조건 지정된 callback 함수가 실행
• 어떠한 인자도 전달받지 않음

• Promise가 성공 여부를 판단할 수 없기 때문

• 무조건 실행되어야 하는 절에서 활용
• .then()과 .catch() 블록에서의 코드 중복을 방지

Promise가 보장하는 것

• Async callback 작성 스타일과 달리 Promise가 보장하는 특징

1. callback 함수는 JavaScript의 Event Loop가 현재 실행 중인 Call Stack을 완료하기 이전에는 절대 호출되지 않음
   • Promise callback 함수는 Event Queue에 배치되는 엄격한 순서로 호출
2. 비동기 작업이 성공하거나 실패한 뒤에 .then() 메서드를 이용하여 추가한 경우에도 1번과 똑같이 동작
3. .then()을 여러 번 사용하여 여러 개의 callback 함수를 추가할 수 있음(Chaining)
   • 각각의 callback은 주어진 순서대로 하나하나 실행하게 됨
   • Chaining은 Promise의 가장 뛰어난 장점

Axios

• Promise base HTTP client for the browser and Node.js
• 브라우저를 위한 Promise 기반의 클라이언트
• 원래는 “XHR”이라는 브라우저 내장 객체를 활용하기 위해 AJAX 요청을 처리하는데, 이보다 편리한 AJAX 요청이 가능하도록 도움을 줌
• 확장 가능한 인터페이스와 함께 패키지로 사용이 간편한 라이브러리를 제공

axios.get('https://jsonplaceholder.typicode.com/todos/1/') // Promise return
  .then(...)
  .catch(...)

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

  const URL = 'https://jsonplaceholder.typicode.com/todos/1/'
  axios.get(URL)
    .then(res => console.log(res.data.title))
    .catch(err => console.log('Error!'))
</script>

axios 예시

const URL = 'https://jsonplaceholder.typicode.com/todos/1/'

axios.get(URL).then
  .then(function (response) {
    console.log(response)
    return response.data
  })
  .then(function (data) {
    return data.title
  })
  .then(function (title) {
    console.log(title)
  })
  .catch(function (error) {
    console.log(error)
  })
  .finally(function () {
    console.log('이건 무조건 실행')
  })

async & await

• ECMA2017 (ES8)에서 등장한 비동기 코드를 작성하는 새로운 방법
• 기존 Promise 시스템 위에 구축된 syntactic sugar
• Promise 구조의 then chaining을 Queue에- 비동기 코드를 조금 더 동기 코드처럼 표현
• Syntactic sugar
  • 더 쉽게 읽고 표현할 수 있도록 설계된 프로그래밍 언어 내의 구문
  • 문법적 기능은 그대로 유지하되, 사용자가 직관적으로 코드를 읽을 수 있게 만듦

사용 방법

1. Promise 방식의 코드를 함수로 묶는다.
2. 해당 함수 맨 앞에 async라는 키워드로 표시를 남긴다.
3. 함수 블록 내부에, 비동기로 동작하는 함수들을 찾아 앞에 await를 남긴다.