[JavaScript] AJAX & Promise & Axios

💡 AJAX

: Asynchronous JavaScript And XML (비동기식 JavaScipt와 XML)

: JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양항 포맷을 주고 받을 수 있음.

: 서버와 통신하기 위해 XMLHttpRequest 객체를 활용.

: 페이지 전체를 reload를 하지 않고서도 수행되는  "비동기성"

(사용자의 event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음)

 

📌 동기 vs 비동기

- 동기식 (Synchronous)

: 순차적, 직렬적 Task 수행.

: 요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐. (blocking)

 

- 비동기식 (Asynchronous)

: 병렬적 Task 수행.

: 요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어짐. (non-blocking)

 

📌 JavaScript 는 single threaded

: 컴퓨터가 여러개의 cpu를 가지고 있어도 main thread라 불리는 단일 스레드에서만 작업 수행

 

• 즉시 처리하지 못하는 이벤트들은 Wed API로 보내서 처리하도록 하고,
• 처리된 이벤트들은 처리된 순서대로 Task queue에 줄을 세워 놓고,
• Call Stack이 비면 Event Loop가 Task queue에서 가장 오래된(제일 앞의) 이벤트를 Call Stack으로 보냄.

1. Call Stack

: 요청이 들어올 때마다 해당 요청을 순차적으로 처리하는 Stack(LIFO) 형태의 자료 구조.

 

2. Web API

: JavaScript 엔진이 아닌 브라우저 영역에서 제공하는 API.

: setTimeout(), DOM event, AJAX로 데이터를 가져오는 시간이 소요되는 일들을 처리.

 

3. Task Queue

: 비동기 처리된 callback 함수가 대기하는 Queue(FIFO) 형태의 자료 구조.

: main thread가 끝난 후 실행되어 후속 JavaScript 코드가 차단되는 것을 방지.

 

4. Event loop

: Call Stack이 비어 있는 경우 Task Queue에서 실행 대기 중인 callback 함수가 있는지 확인하고 있다면 가장 앞에 있는 callback 함수를 Call Stack 으로 push.

 

💡 Promise

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

: 성공에 대한 약속 (then), 실패에 대한 약속 (catch)

 

📌 .then(callback)

: 이전 작업(promise)이 성공했을  때 수행할 작업을 나타내는 callback 함수

: 그리고 각 callback 함수는 이전 작업의 성공 결과를 인자로 전달 받음

 

📌 .catch(callback)

: .then이 하나라도 실패하면 동작

: 이전 작업의 실패로 인해 생성된 error 객체는 catch 블록 안에서 사용할 수 있음

 

📌 .finally(callback)

: 결과와 상관없이 무조건 지정된 callback 함수가 실행

: 어떠한 인자도 전달받지 않음

 

💡 Axios

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

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

 

const URL = '...'

axios.get(URL)
  .then((res) => {
    console.log(res)
    return res.data
  })
  .then((data) => {
    return data.title
  })
  .then(title) => {
    console.log(title)
  })
  .catch((error) => {
    console.log(error)
  })
  .finally(function () {
    console.log('이건 무조건 실행됩니다.')