JavaScript

Promise - then/catch

용성 2021. 2. 23. 02:05

Promise 란?

Promise 개체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.

  • 매개변수

    우선 Promise 는 매개변수로 executor 를 받게 됩니다. executor  resolve  reject 인수를 전달할 실행함수입니다.

    resolve  reject 는 함수로서 호출되면 promise 를 이행하거나 거부합니다. 이 둘을 이용하여 비동기 작업이 모두 끝나면 resolve 를 호출해 이행하고, 중간에 오류가 생기면 reject 를 이용해 거부하게 됩니다.

  • 상태

    Promise 는 3가지 상태를 가질 수 있습니다.

    • pedding : 대기 상태로서 아직 resolve 할지 reject 할 지 결정되지 않은 초기의 상태입니다.
    • fullfilled : 이행 상태로서 연산이 성공적으로 완료된 상태입니다.
    • rejected : 거부 상태로서 연산이 실패한 상태입니다.

Promise 를 사용하게 되면 아직 모르는 값들과 함께 작업을 할 수 있게 됩니다.

 

Promise 를 사용해봅시다.

executor 로 arrow function 을 사용했고 이는resolve  reject , 두 함수를 매개변수로 받습니다.

그 후 결과를 확인하면 아직 어느 것도 결정되지 않았으므로 pedding 상태입니다.

const promise = new Promise((resolve, reject)=>{}); console.log(promise); // Promise { <pending> }

 

promise 는 3초 후에 resolve 하게 되고 밖에서는 1초마다 promise 를 실행해보았습니다.

3번째 까지는 pending 상태고 그 이후에는 resolve 의 매개변수로 들어간 string이 출력이 되는 걸 확인할 수 있습니다.

const promise = new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve("resolve"); }, 3000); }); console.log(promise); setInterval(()=>{ console.log(promise); }, 1000); /* Promise { <pending> } Promise { <pending> } Promise { <pending> } Promise { 'resolve' } Promise { 'resolve' } Promise { 'resolve' } ... */

 

Promise 의 then 과 catch

then

promise 가 종료가 되면 resolve 에 들어간 값을 받을 수 있습니다.

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

    setTimeout(()=>{

    resolve("resolve"); }, 3000); });

 

promise.then(value => console.log(value));

// 3초 후에 결과가 출력 // resolve

 

catch

하지만 reject 된 경우에는 then 으로 받을 경우, 에러가 발생합니다.

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

    setTimeout(()=>{ reject("reject"); }, 3000); });

promise.then(value => console.log(value)); 

// UnhandledPromiseRejectionWarning: reject

 

이 때 catch 를 사용하여 에러를 잡아줄 수 있습니다.

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

     setTimeout(()=>{ reject("reject"); }, 3000); });

promise.then(result => console.log(result)).catch(error => console.log(error));

// 3초 후에 결과가 출력 // reject

 

catch  then 뒤에 연결되어있기 때문에 then 이 먼저 실행 후 catch 가 실행 된다고 생각할 수 있지만 그렇지 않습니다.

둘은 절대 같이 실행 될 수 없습니다. resolve 시에는 then, reject 시에는 catch 가 실행되는 것이죠.

728x90