JavaScript async&await

김동완·2022년 5월 3일
0

javascript

목록 보기
22/22
post-thumbnail

async & await

개념

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

Promise -> async & await 적용

Promise
const URL = 'https://dog.ceo/api'

function fetchFirstDogImage() {
    axios.get(URL + 'breeds/list/all')
    .then(res => {
        const breed = Object.keys(res.data.message)[0]
        return axios.get(URL + `breed/${breed}/images`)
    })
    .then(res => {
        console.log(res)
    })
    .catch(err => {
        console.error(err.response)
    })
}
fetchFirstDogImage()
async & await
const URL = 'https://dog.ceo/api'

async function fetchFirstDogImage() {
    const res = await axios.get(URL = 'breeds/list/all')
    const breed = Object.keys(res.data.message)[0]
    const images = await axios.get(URL + `breed/${breed}images`)
    console.log(images)
}
fetchFirstDogImage()
	.catch(err => console.error(err.response))
profile
내가 공부한 내용들이 누군가에게 도움이 될지 몰라서 쓰는 벨로그

0개의 댓글