Promise

자바스크립트에서는 비동기 처리를 위해 콜백함수를 사용한다
이 콜백 함수의 콜백지옥을 보완하기 위해 프로미스가 생겨났다.

내가 이해한 것

❓ 프로미스에대해 공부하다보면 .then() 이것도 프로미스고, .catch()도 프로미스고 반환값도 프로미스고 뭐가 프로미스인지 이해가 잘 안간다.

내가 이해한 바로는 promise는 객체 즉 모듈이다.
따라서 비동기 작업시에 결과로 반환되는 객체가 promise고 그 promise 내부 함수 .then() 혹은 .catch()로 데이터를 추출해서 다시 promise로 반환하고 ...
❗️ 그래서 나는 비동기 작업의 결과값을 promise라고 이해하기로 했다

이제 이해가 갔으니 제대로 알아보면

promise의 상태

• 대기 중(pending): 결과 기다리는중
• 이행됨(fulfilled): 수행 정상적으로 끝남, 결과값 가지고 있음
• 거부됨(rejected): 수행이 비정상적으로 끝남

promise의 메서드

.then()

이행됨, 거부됨 상태의 프로미스를 처리할 때 사용하는 메서드
.then(onResolve, onReject);

onResolve: 이행됨 일때의 콜백함수
onReject: 거부됨 일때의 콜백함수

📌 .then()의 반환값은 promise로 묶여서 나온다( 내부에서 return 써줘야함 )

.catch()

수행중 발생한 예외를 처리하는 메서드
.then()의 onReject함수와 같은데 이게더 가독성이 좋다

.finally()

프로미스가 이행됨 또는 거부됨 상태일 때 호출되는 메서드
무조건 사용된다.
프로미스 체인의 가장 마지막에 사용한다

활용해보기

fetch("https://jsonplaceholder.typicode.com/users")
    .then((response) => {
      console.log(response);
      return response.json();
    })
    .catch((error) => {
      console.log(error);
    })
    .then((response) => {
      console.log(response);
    })
    .finally(() => {
      console.log("이건 무조건 나옴");
    });

위 코드를 보면 fetch를 통해 비동기적으로 데이터를 받아온다
1. 첫번째 then은 response 객체 형태의 promise 객체를 받음,
.json()으로 데이터 추출해서 반환(이 반환값도 promise임)
2. catch로 예외 처리
3. 첫번째 then으로부터 온 프로미스 객체를 출력한다.
4. finally는 무조건 출력된다.

❗️ 직접 사용해 보면 promise는 그냥 비동기에서 특히 api 요청시에 서버에서 반환해주는 반환값인 객체이고
대부분 response 객체 형태이기 때문에 그 안에서 data를 추출하는 용도로 사용된다.

비동기 과정

프로미스는 비동기 이기 때문에 태스크 큐에 들어가서 작업이 실행되고 콜스택이 비면 이벤트 루프가 콜스택으로 옮겨준다.
따라서 내가 생각한것처럼 동작 순서가 이상할 때가 있다.
async await 랑 같이있는 예시를 한번 보면

const one = () => Promise.resolve('one!');

async function myFunc() {
	console.log('func 안이에요');
  	const res = await one();
  	console.log(res);
}

console.log('함수 호출 전');
myFunc();
console.log('함수 호출 후');

위 예시를 출력해 보면

함수 호출 전
func 안이에요
함수 호출 후
one!

이렇게 나온다.
내가 원한거랑 마지막 두개의 순서가 다르다.
그 이유는 순서대로

• '함수 호출 전' 실행
• myFunc() 호출
• 'func 안이에요' 실행
• await one 호출
• await를 만나면 해당 함수 myFunc 의 기능이 중지되고 MICROTASK QUEUE로 보내서 작업을 한다.
• '함수 호출 후' 실행
• 이벤트 루프가 myFunc 함수를 다시 콜스택에 올림
• res 출력

함으로써 프로그램이 끝나게 된다.

따라서 비동기 때문에 내가 생각한것처럼 프로그램이 동작 안할 수 있지만 비동기를 마스터 한다면 내가 원하는 동작을 비동기 적으로 만들 수 있기 때문에 비동기 동작에 대해 잘 알고있는게 중요하다고 생각한다.

참고 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
실전 리액트 프로그래밍