[Javascript] 비동기 처리 promise

Javascript

[Javascript] 비동기 처리 promise

mm_스터디 2024. 5. 25. 15:01

728x90

비동기 작업을 효율적으로 처리할 수 있도록 도와주는 자바스크립트 내장 객체

let(const) 변수명 = new Promise()

promise의 3가지 상태

1. 대기상태- 아직 작업이 완료되지 않은 상태

2. 성공 상태 - 비동기 작업이 성공적으로 마무리된 상태

3. 실패 상태 - 비동기 작업이 실패한 상태

1번 상태에서 2번 상태로 넘어가는 것을 해결(resolve)되었다고 함
1번 상태에서 3번 상태로 넘어가는 것을 거부(reject)되었다고 함

const promise = new Promise(() => {
  setTimeout(() => {
    console.log("안녕");
  }, 2000);
});
console.log(promise);

→지금 이 함수의 상태는 [[PromiseState]]:"pending"(대기 상태)

promise 함수가 성공, 실패 상태가 되게 하려면

resolve, reject 사용

우선 성공 상태로

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log("안녕하세요 반갑습니다");
    resolve();
  }, 2000);
});
setTimeout(() => {
  console.log(promise2);
}, 3000);

→지금 이 함수의 상태는 [[PromiseState]]:"fulfilled" (성공 상태)

실패 상태는

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log("안녕하세요 반갑습니다 ");
    reject();
  }, 2000);
});
setTimeout(() => {
  console.log(promise3);
}, 3000);

→결괏값: 오류 발생 " Uncaught (in promise) undefined "

[[PromiseState]]:"rejected"(실패 상태)

then, catch 메서드

than은 성공 상태일 때만 작동

실패 상태 일 때는 catch 동작

let(const) 변수명 = newPromise()

변수명.then()

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log("안녕하세요 반갑습니다 ");
    reject();
  }, 2000);
});
setTimeout(() => {
  console.log(promise3);
}, 3000);

promise3

.then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log(error);
  });

promise의 최대 장점

callback지옥에 빠지지 않고 비동기를 반복할 수 있음

add10(0)
  .then((result) => {
    console.log(result);
    const newP = add10(result);
    return newP;
  })
  .then((result) => {
    console.log(result);
  })
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

728x90