(JS)callback, promise

- 자바스크립트가 동기적으로 동작하는 한계점을 해결하려고 노력한 과정

1. callback 함수 활용 -> 문제점: 콜백지옥

2. Promise 객체

• Promise는 현재는 얻을 수 없지만, 추후 작업이 완료되면 받아올 수 있는 데이터에 대한 접근 수단의 역할을 해준다. 우리는 이 Promise 객체를 직접 생성해 줄 수 있다. new Promise()와 같은 코드를 입력하면 된다.
• Promise 객체는 총 세가지의 상태를 갖는다
  -대기(Pending): 비동기 처리가 아직 완료되지 않은 상태
  -이행(Fulfilled): 비동기 처리가 완료되어 결과값을 반환해준 상태
  -실패(Rejected): 비동기 처리가 실패 혹은 오류가 발생한 상태

promiseTest 함수를 실행했을 때, 그 반환 값으로 Promise 객체를 돌려받는 코드.
Promise 객체를 생성할 때는 내부에 함수를 인자로 넣어줄 수 있는데, 이때 그 내부 함수는 resolver, reject를 매개변수로 받아올 수 있다.
비동기 처리가 완료되면(Fulfilled), resolver가 호출된다.
비동기 처리에 실패하면(Rejected), reject가 호출된다.
그리고 위 함수를 보면 resolver의 실행을 2초간 지연시키고 있다. 때문에 해당 Promise 객체를 돌려 받은 뒤, 2초가 지나기 이전에 참조하려 하면 Pending 상태임을 돌려받게 된다. 아직 resolver가 호출되지 않았기 때문이다.

3. then(), catch()
   -통신을 통해 응답을 받아오는 과정은 코드가 실행되는 과정보다 느린 경우가 대다수이다. 때문에 통신 또한 비동기 처리가 필요하다.

const communicationResult = fetch(HTTP Request)
console.log(communicationResult)

-es6 문법인 fetch()를 사용해주면 JavaScript에서 바로 통신을 수행할 수 있다.

-위 코드처럼 어떠한 서버로 통신을 요청한 경우 그 결과를 바도 받아와 콘솔로그로 출력해보면, Promise 객체가 담겨져 있다. Promise 객체는 비동기 동작의 결과로 받아올 수 있는 객체이다. 아직은 해당 동작의 결과를 받지 못했지만 언젠간 돌려줄 것이라는 약속이 담긴 객체이다.

-통신의 결과를 특정 로직에 적용시키고 싶다면, 그 결과를 받아올 때까지 기다려줄 필요가 있다. 비동기 통신을 처리해주는 방법 중에 then(), catch() 메서드를 사용해보자.

fetch(HTTP Request)
	.then((res) => {
		console.log(res)
	})
	.catch((err) => {
		console.error(err)
	})

-fetch()를 사용한 후에 그 응답을 받아올 때까지 기다리도록 fetch()에 붙여서 then()을 사용해주면 된다.
then() 메서드는 fetch()뿐만 아니라 Promise 객체를 돌려주는 함수라면 언제든 사용할 수 있다.
-해당 요청에 의한 통신이 완료 되었다면, then() 메서드 내부로 코드의 실행이 옮겨진다.
then() 메서드 내부에 익명 함수를 하나 만들고 그 안에서 매개변수로 데이터를 받을 수 있는데,
이때, 받아오는 데이터가 바로 통신의 결과로 우리에게 돌려준 데이터이다.
-만약 통신을 수행하다가 통신에서 문제가 생긴다면, 혹은 then() 메서드 내에서 로직을 수행하다가 에러를 만난다면 우리는 catch 메서드로 그 분기를 나눠줄 수 있다.
-catch() 메서드 내부에도 익명 함수를 넣어줄 수 있는데, 해당 함수의 매개변수로 error의 내용을 받아올 수도 있다.