[JS] Axios

비동기 처리의 단점

• Web API로 들어오는 순서가 아니라 작업이 완료되는 순서에 따라 처리됨
• 코드의 실행 순서가 불명확함

→ 콜백 함수를 사용하자

---

# 비동기 콜백

비동기적으로 처리되는 작업이 완료되었을 때 실행되는 함수

연쇄적으로 발생하는 비동기 작업을 순차적으로 동작할 수 있게 함

근데 이렇게 하다보면 콜백 지옥(파멸의 피라미드)가 생김 → (콜백 안에, 콜백 안에, 콜백 안에....)

 

 

그래서 만든게..

# Promise

비동기 콜백과 같은 역할, Axios 라이브러리

= 작업이 끝나면 실행시켜 줄께

• then(callback) 
  
  • 요청한 작업이 성공하면 callback실행
  • 이전 작업의 성공 결과를 인자로 전달 받음
• 실패에 대한 약속 catch()
  • then()이 하나라도 실패하면 callback 실행
  • callback은 이전 작업의 실패 객체를 인자로 전달 받음

work1()
  .then((result1) => {
    return result2
  })
  .then((result2) => {
    return result3
  })
  .then((result3) => {
    return result4
  })
  .catch((error) => {
    console.log(error)
  })

즉, Promise는 chaining을 할 수 있다 → then을 계속 이어가면서 작성할 수 있게 됨

 

chaining의 목적

• 비동기 작업의 순차적인 처리가 가능
• 코드를 보다 직관적이고 가독성 좋게 작성할 수 있음
• .then()을 여러 번 사용하여 여러 개의 callback 함수를 작성할 수 있음

.then((response) => {
  const imgurl = response.data[0].url
  return imgurl

})
.then((imgurl) => {
  const imgTag = document.createElement('img')
  imgTag.setAttribute('src',imgurl)
  document.body.appendChild(imgTag)
})
.catch((error) => {
  consolel.log(error)
})

then을 여러개로 쪼개도 그대로 작동함을 확인할 수 있다.