promise

자바스크립트는 싱글스레드를 지원하는 언어로써 동기적 실행으로 코드가 진행된다. 그런데 자바스크립트에서 비동기 처리를 할 수 있게 해주는 3가지 방법이 있다. 그 3가지 방법중 한가지인 promise에 대해 알아보려고 한다.

프로미스는 비동기처리를 하기 위한 자바스크립트의 객체로써 항상 프로미스객체를 통해 결과값을 반환한다.

프로미스에서는 3가지 상태가 존재한다.

1. pending - 값의 처리가 대기 중인 상태이다.
2. fullfield - 값의 처리가 완료된 상태이다.
3. reject - 값의 처리가 실패한 상태이다.

promise 객체 생성

new Promise((resolve,reject)=>{
	if(...){
       reslove(/*반환 값*/) // 작업 성공시 반환
      } 
    else{
      reject(/*에러*/) // 작업 실패시 반환
    }
})

프로미스 객체는 생성자 함수를 통하여 생성된다. 그리고 두가지 인자를 받는다.
첫번째 인자는 resolve로 어떠한 작업을 성공했을 때, 그 값을 resolve인자에 담아서 반환한다. 두번째 인자로는 reject로 값의 처리가 실패하였을 때 에러의 메세지나 에러의 값을 reject의 인자로 담아서 반환한다.

promise 값의 반환

위의 코드를 보면 조건문에 따라 resolve 안의 값인 "성공"이 반환되어야 한다.
하지만 출력결과를 보면

프로미스 객체에 감싸진 결과값을 볼 수 있다.

then()

위의 프로미스의 상태는 fullfield로써 값의 처리가 완료된 상태로써 값을 호출할 수 있는 상태이다. 이러한 상태에서는 then을 이용하여 값을 가져올 수 있다.

출력결과

then을 이용하면 콜백 함수로 promise의 결과 값을 받을 수 있다.

catch()

만약 예시 코드에서 에러가 나는 상황이 발생했을 때는 catch를 통해 에러 헨들링을 효율적으로 할 수 있다.

만약 값의 처리가 실패하였을 경우 프로미스는 then 구문으로 가지 않고 catch 구문이 실행되면서 reject안에 담겨 있던 값이 반환된다.

프로미스 체인

Promise 체인은 일반적으로 then() 메서드를 사용하여 구성되며, 각 then() 메서드는 이전 Promise의 결과를 받아들이고 새로운 Promise를 반환한다. 이렇게 하면 여러 개의 비동기 작업을 순차적으로 실행할 수 있다.

만약 데이터를 받아오는 비동기 함수가 존재한다고 가정하면,

fetch('https://api.example.com/data')
  .then(response => response.json()) // 첫 번째 Promise
  .then(data => processData(data))   // 두 번째 Promise
  .then(result => console.log(result)) // 세 번째 Promise
  .catch(error => console.error(error)); // 오류 처리

이런식으로 프로미스 체인을 생성 할 수 있다.

첫번째 promise에서는 fetch 받은 데이터 값을 json형태로 변환하여 두 번째 프로미스에 인자로 전달한다. 전달 받은 인자로 값을 처리한 뒤 세 번째 프로미스에서 그 결과 값을 콘솔로 출력한다.

promise.all()

promise의 병렬적 처리가 가능해진다. promise.all()은 프로미스들을 배열로 받으면서 프로미스의 처리를 한번에 처리한다. 그리고 그 결과 값을 배열로 반환하고, 하나라도 프로미스처리가 실패하면 에러가 발생한다.

new Promise.all([(프로미스 객체1),(프로미스 객체2)]...)

기존에는

setTimeout이 실행되면서 프로미스가 순차적으로 실행 되었다.
하지만 promise.all을 사용하면 병렬적 처리가 가능해지기 때문에

프로미스의 처리가 모두 완료되면 값을 반환한다.