JS AJAX, Promise

AJAX

AJAX

• Asynchronous Javascript And XML
• 서버와 통신하기 위해 XMLHttpRequest객체를 활용
• 페이지 전체를 reload를 하지 않고서도 수행되는 "비동기"성
  • 사용자의 이벤트가 있으면 전체 페이지가 아닌 일부분만을 업데이트

XMLHttpRequest object

• 서버와 상호작용하기 위해 사용되며, 전체페이지의 새로고침 없이 URL로부터 데이터를 받아올 수 있음.
• 사용자가 하는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해줌
• XML 뿐만 아니라 모든 종류의 데이터를 받아오는데 사용 가능
• 생성자 : HTMLHttpRequest()

Asynchronous JS

동기와 비동기

• 동기식

  • 순차적, 직렬적 태스크 수행
  • 요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐

• 비동기식

  • 병렬적 태스크 수행
  • 요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어짐
  • 즉, 요청을 보내놓고 다음 태스크로 진행

왜 비동기를 사용하는가?

• 사용자 경험
• 예를들어 데이터를 구동하고 실행되는 앱이 있으며 이 데이터의 크기가 굉장히 크가도 가정한다. 동기식 코드라면 데이터를 모두 로드 한 뒤에야 앱이 실행되기 때문에, 로드 되는 동안 우리는 앱을 사용할 수 없는 상태로 얼마나 걸릴지 모르는 로딩 시간을 기다려야 함. 동기식 요청은 코드 실행을 차단하여 화면이 멈추고 응답하지 않는 사용자 경험을 만듦. 그래서 대부분의 웹 API기능은 비동기로 사용됨

Threads

• 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스
• 각 스레드는 한번에 하나의 작업만 수행할 수 있음
• TaskA -< TaskB -> TaskC
  • 다음 작업을 시작하려면 반드시 앞의 작업이 완료되어야 함
  • CPU는 여러 코어를 가지고 있기 때문에 한 번에 여러가지 일을 처리할 수 있음

JS는 싱글 스레드 이다.

• 컴퓨터가 여러개의 CPU를 가지고 있어도 main thread에서만 실행한다. 즉, 이벤트를 처리하는 Call Stack이 하나인 언어라는 의미
• 이 문제를 해결하기 위해서 JS는, 즉시 처리하지 못하는 이벤트들을 다른곳(Web API)으로 보내서 처리하도록 하고, 처리된 이벤트들은 처리된 순서대로 대기실(Task queue)에 줄을 세워놓고 Call Stack이 비면 담당자(Event Loop)가 대기 줄에서 가장 오래된 이벤트를 Call Stack으로 보냄.

Concurrency model

Event loop을 기반으로 하는 동시성 모델

1. Call Stack

• 요청이 들어올 때마다 해당 요청을 순차척으로 처리하는 Stack 형태의 자료구조

2. Web API (Browser API)

• JS 엔진이 아닌 브라우저 영역에서 제공하는 API
• setTimeout(), DOM events 그리고 AJAX로 데이터를 가져오는 시간이 소요되는 일들을 처리

3. Task Queue(Event Queue, Message Aueue)

• 콜백함수가 대기하는 Queue 형태의 자료구조
• main thread가 끝난 후 실행되어 후속 JS코드가 차단되는 것을 방지

4. Event Loop

• Call Stack이 비어있는지 여부를 확인
• 비어있는 경우 Task Queue에서 실행 대기중인 콜백이 있는지 확인
• Task Queue에 대기중인 콜백이 있다면 가장 앞에있는 콜백을 Call Stack으로 push

순차적인 비동기 처리하기

• Web API로 들어오는 순서는 중요하지 않고, 어떤 이벤트가 먼저 처리되느냐가 중요.
• 이를 해결하기 위해 순차적인 비동기 처리를 위한 2가지 방식

1. Async callback
   백그라운드에서 실행을 시작할 함수를 호출할 때 인자로 지정된 함수
   예시) addEventListener()의 두번째 인자
2. promise-style
   Modern Web APIs에서의 새로운 코드 스타일

---

Async callback

Callback Function

• 다른 함수에 인자로 전달 된 함수
• 외부 함수 내에서 호출되어 일종의 루틴 또는 작업을 완료함
• 동기식, 비동기식 모두 사용됨
• 비동기 작업이 완료된 후 코드 실행을 계속하는데 사용되는 경우 비동기 콜백이라고 함.

JS의 함수는 "일급객체" (First-class object)

• 일급객채 ( 일급함수 )
  => 다른 객체들에 적용 가능한 연산을 모두 지원하는 객체
• 조건

1. 인자로 넘길 수 있어야
2. 함수의 반환 값으로 사용할 수 있어야
3. 변수에 할당 할 수 있어야

Async callbacks

콜백중에서도 비동기형식으로 콜백을 사용할 수 있다.

• 백그라운드에서 코드 실행을 시작할 함수를 호출할 때 인자로 지정된 함수
• 백그라운드 코드 실행이 끝나면 콜백 함수를 호출하여 작업이 완료되었음을 알리거나, 다음 작업을 실행하게 할 수 있음.

Why use Callback?

콜백함수는 명시적인 호출이 아닌 특정, 루틴, 액션에 의해 호출된다. 장고의 경우 "요청이 들어오면", event의 경우 "특정 이벤트가 발생하면" 이라는 조건 하에서 함수를 호출할 수 있었던 건 'Callback Function'메커니즘이 있기 때문에 가능하다.

비동기 로직을 수행할 때 콜백함수는 필수인데, 명시적인 호출이 아닌, 특정 시점에 '알아서' 호출되도록 만들어야하기 때문이고, 기다려주지 않고 언젠가 처리해야하는 일은 콜백함수를 활용해야한다.

Callback Hell

순차적인 연쇄 비동기작업을 처리하기 위해 '콜백 함수를 호출하고, 그 다음 콜백 함수를 호출하고, 또 그 함수의 콜백 함수를 호출하고.'의 패턴이 지속적으로 반복되는 것을 말한다.
즉, 콜백안에서 또 콜백함수, 그 안에서 또 콜백함수,, 이렇게 계속 들어가게 된다.

이 상황에는 '디버깅'과 '코드가독성'을 통제하기가 어렵다.

---

Promise

Promise object

비동기 작업의 최종 완료 또는 실패를 나타내는 객체이다. 미래의 완료 또는 실패와 그 결과 값을 나타냄. 미래의 어떤 상황에 대한 약속
성공에 대한 약속 : .then
tlfvo실패에대한약속: .catch

Promise의 상태

1. 대기(pending)
2. 이행(fulfilled)
3. 거부(rejected)

method

• .then(callback)
  • 이전 작업이 성공, 이행되었을 때 수행할 작업을 나타내는 콜백함수
  • 그리고 각 콜백함수는 이전 작업의 성공 결과를 인자로 전달 받음
  • 따라서 성공했을 때의 코드를 콜백 함수 안에서 작성
• .catch(callback)
  • .then이 하나라도 실패하면 동작함.
  • 이전 작업의 실패로 인해 생성된 error객체는 catch 블록 안에서 사용할 수 있음

각각의 .then()블록은 서로 다른 promise를 반환한다. 즉, .then()을 여러개 사용(chaining)하여 연쇄적인 작업을 수행할 수 있다. 결국 여러 비동기 작업을 차례대로 수행할 수 있다.
마찬가지로 .then()과 .catch()메서드는 모두 promise를 반환하기 때문에 체이닝 가능
주의할 점은 반환값이 반드시 있어야하고, 없다면 콜백함수가 이전의 promise 결과를 받을 수 없다.

• .finally(callback)
  • Promise 객체를 반환
  • 결과에 상관없이 무조건 지정된 콜백함수가 실행
  • 어떠한 인자도 전달 받지 않음
  • Promise가 성공되었는지 거절되었는지 판단못함.
  • 무조건 실행되어야 하는 절에서 활용

Promise 기본 구조

• 두개의 콜백함수를 인자로 받음
• 하나는 Promise가 이행했을 때, -> resolve()
• 하나는 거부했을 때 -> reject()

Promise가 보장하는 것

1. 콜백은 자바스크립트 이벤트 루프가 현재 실행중인 콜 스택을 완료하기 이전에는 절대 호출되지 않는다.

2. 비동기 작업이 성공하거나 실패한 뒤에 .then()메서드를 이용하여 추가한 경우에도 1번과 똑같이 동작한다.

3. .then()을 여러번 사용하여 여러개의 콜백을 추가할 수 있다.(Chaining)
   각각의 콜백은 주어진 순서대로 하나하나 실행되고, Promise의 가장 큰 장점이다.

---

Axios

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

axios.get('url') // Promise return
  .then(..)
  .catch(..)