JS 심화_03 (Axios, async & await)

Axios

ref : https://axios-http.com/docs/intro

• Promise based HTTP client for the browser and node.js

• 브라우저를 위한 Promise 기반의 클라이언트

• 원래 'XHR'이라는 브라우저 내장 객체를 활용해 AJAX 요청을 처리하는데, 이보다 편리한 AJAX 요청이 가능하도록 도와주는 기능

  • 확장 가능한 인터페이스와 함께 패키지로 사용이 간편한 라이브러리를 제공

Installing

• npm 사용 시

$ npm install axios

• CDN 사용 시

  • jsDelivr CDN

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  

  • unpkg CDN

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

Axios 예시

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

axios.get(URL)
  .then(function (response) {
    console.log(response.data)
    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('이건 무조건 실행')
  })

• 위와 같은 스타일이 있지만 다음의 예시와 같이 관련 구성을 상세하게 적는 것을 지향함

// Send a POST request

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})
  .then(function (response) {
    console.log('POST 성공')
  })
  .catch(function (error) {
  	console.log('에러 확인' + error)  
  })

// GET request for remote image in node.js

axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg')) // 성공 시 콜백 함수 실행
  })

async & wait

ref : https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Async_await

• 비동기 코드를 작성하는 또다른 방법

  • ECMAScript 2017(ES8)에서 등장

• 기존 Promise 시스템 위에 구축된 Syntatic sugar*

  • Promise 구조의 then chaining을 제거

• 비동기 코드를 조금 더 동기 코드처럼 표현하고 작동하게 하는 것이 가장 큰 장점

Syntactic sugar

• 더 쉽게 읽고 표현할 수 있도록 설계된 프로그래밍 언어내의 구문

• 즉, 문법적 기능은 그대로 유지, 그것을 읽고 쓰는 사람이 직관적으로 접근하게 만듦

• Promise -> async & await 적용

async function getTodo (url) {
  const response = await axios.get(url)
  await console.log(response)
  await console.log(response.data.title)
}

getTodo('https://jsonplaceholder.typicode.com/todos/1/')
.catch(function (error) {
  console.log(error)
})
.finally(function () {
  console.log('이건 무조건 실행됩니다.')
})