본문 바로가기
WEB/JavaScript

[JS] Promise

by DeveloperCat 2023. 10. 28.
반응형

          동기식 (Synchronous)

먼저 시작된 하나의 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다렸다가 다 끝나면 새로운 작업을 시작하는 방식. , 한 번에 여러 작업을 처리하지 않고 하나만 처리함.

          비동기식 (Asynchronous)

먼저 실행된 작업이 끝날 때까지 기다리지 않고 다음 작업을 수행하는 방식. , 한 번에 여러 작업을 처리함.

 

 

 

Promise

Promise 는 비동기 작업의 단위 입니다. Promise 는 비동기 작업을 조금 더 편하게 처리 할 수 있도록 ES6 에 도입된 기능입니다. 이전에는 비동기 작업을 처리 할 때에는 콜백 함수로 처리를 해야 했었는데요, 콜백 함수로 처리를 하게 된다면 비동기 작업이 많아질 경우 코드가 쉽게 난잡해지게 되었습니다.

 

const promise1 = new Promise((resolve, reject) => {

  // 비동기 작업

});

 

Promise 는 성공 할 수도 있고, 실패 할 수도 있습니다. 성공 할 때에는 resolve 를 호출해주면 되고, 실패할 때에는 reject 를 호출해주면 됩니다.

 

 

<성공시>

const myPromise = new Promise((resolve, reject) => {

  setTimeout(() => {

    resolve(1);

  }, 1000);

});





myPromise.then(n => {

  console.log(n);

});

 

<실패시>

const myPromise = new Promise((resolve, reject) => {

  setTimeout(() => {

    reject(new Error());

  }, 1000);

});





myPromise

  .then(n => {

    console.log(n);

  })

  .catch(error => {

    console.log(error);

  });

 

 

프로미스의 에러 처리 방법

1.         then 메소드의 두 번째 인자로 예외를 처리하는 방법

 

const promise = () => new Promise((resolve, reject) => {

    let a = 1 + 1





    if(a == 3) {

        resolve('success')

    } else {

        reject('failed')

    }

})





promise().then((message) => {

    console.log('This is in the then ' +  message)

}, (error) => {

    console.log('This is in the then ' +  error)

})

 

 

2.         catch 메소드를 이용하여 예외를 처리하는 방법

const promise = () => new Promise((resolve, reject) => {

    let a = 1 + 1





    if(a == 3) {

        resolve('success')

    } else {

        reject('failed')

    }

})





promise().then((message) => {

    console.log('This is in the then ' +  message)

}).catch((error) => {

    console.log('This is in the catch ' + error)

})

 

 

프로미스 체이닝

프로미스 체이닝이란, 프로미스 핸들러를 연달아 연결하는 것을 말한다. 이렇게 하면 여러 개의 비동기 작업을 순차적으로 수행할 수 있다는 특징이 있다.

 

 

정적 메소드

1.         Promise.resolve : 프로미스 생성자를 사용하여 프로미스 객체를 반환하는 함수

2.         Promise.reject : 주어진 사유로 거부되는 프로미스 생성

3.         Promise.all : 메서드 인자로 프로미스 배열을 넣어, 모든 프로미스가 이행될 때까지 기다리고, 결과값을 출력

4.         Promise.race : Promise.race()  Promise.any() 와 같이 여러 개의 프로미스 중 가장 먼저 처리된 프로미스의 결과값을 반환하지만, 차이점이 존재한다. Promise.any()는 가장 먼저 fulfilled(이행) 상태가 된 프로미스만을 반환하거나, 혹은 전부 rejected(실패) 상태가된 프로미스(AggregateError)를 반환한다. 반면 Promise.race()  fulfilled(이행), rejected(실패) 여부 상관없이 무조건 처리가 끝난 프로미스 결과값을 반환하다.

5.         Promise.allSettled : Promise.all() 메서드의 업그레이드 버전으로, 주어진 모든 프로미스가 처리되면 모든 프로미스 각각의 상태와 값 (또는 거부 사유)을 모아놓은 배열을 반환한다.

반응형

'WEB > JavaScript' 카테고리의 다른 글

[JS] fetch 메소드  (0) 2023.10.28
[JS] 반복문 비동기  (0) 2023.10.28
[JS] 모듈  (0) 2023.10.28
[JS] json  (0) 2023.10.28
[JS] constructor & instanceof  (0) 2023.10.28