Promise - then/catch
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 가 실행되는 것이죠.