[Javascript] 비동기 처리(2): Promise ⭐

프로미스는 비동기 처리 상태와 처리 결과를 관리하는 객체이다.

 

// 웹 API를 포함하여 Promise를 반환하는 함수 에 해당하는 내용

/*의도와는 다른 코드*/
let promise = axios.get("/api/classes")
// promise 변수에 Promise object가 저장됨.
// pending 상태. (성공도 실패도 아닌 상태)


/*정상적인 코드1 - Promise*/
axios.get("/api/classes")
	.then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
// Promise Object의 .then()메서드를 호출하여 
// Promise가 성공적이고 response를 반환할 때만 실행한다.
// fulfiled 상태. (성공적으로 Promise가 처리되었으므로)


/*정상적인 코드2 - async/await */
async function fetchData(){
    try{
        let response=await axios.get('/api/classes');
	    if (!response.ok){
            throw new Error(`HTTP ERROR:${response.status}`);
        }
    }catch(err){
        console.log(err)
    }
}

Promise 상태

Promise가 생성

: pending 상태 (성공도 실패도 아닌 상태)

 

성공적으로 처리된 Promise

: fulfiled 상태

실패한 Promise

: rejected 상태 , 어떤 이유 때문에 rejected 되었는지 에러 메시지를 포함한 결과가 반환(catch에서 확인)

 

Promise 결과 반환

: resolved 상태 (Promise 결과 반환만 되면, 결과 상관없이)

 

Promise API (5가지 메서드)

https://ko.javascript.info/promise-api

 Promise.all() 

: 여러 개의 비동기 처리를 모두 병렬 처리할 때

프로미스를 요소로 갖는 이터러블을 인수로 전달받는다. 

전달받은 모든 프로미스가 모두 fulfilled 상태가 되면 모든 처리 결과를 배열에 저장해 새로운 프로미스를 반환한다.

첫번째 promise가 resolve돤 처리결과를 차례대로 배열에 저장해 그배열을 resolve하는 새로운 프로미스를 반환한다. 처리 순서가 보장된다. 전달받은 배열의 프로미스가 하나라도 rejected가 되는 경우 fulfilled 상태가 되는 것을 기다리지 않고 즉시 종료한다. 인수로 전달받은 이터러블의 요소가 프로미스가 아닌 경우 Promsise.resolve 메서드를 통해 프로미스로 래핑한다.

 Promise.race() 

: 가장 먼저 fulfilled 상태가 된 프로미스의 처리 결과를 resolve하는 새로운 프로미스를 반환한다.

전달받은 배열의 프로미스가 하나라도 rejected가 되는 경우 fulfilled 상태가 되는 것을 기다리지 않고 즉시 종료한다. 

Promise.allSettled()

: 모두 settled상태(비동기 처리가 수행된 상태, fulfilled or rejected)가 되면, 처리 결과를 배열로 반환한다.

fulfilled ; 비동기 처리 상태를 나타내는 status 프로퍼티, 처리결과를 나타내는 value 프로퍼티 {status: , value: }

rejected ; 비동기 처리 상태를 나타내는 status 프로퍼티와 에러를 나타내는 reason 프로퍼티 {status: , reason: }

 

---

프로미스의 후속 처리 메서드의 콜백 함수는 마이크로태스크 큐에 저장되고,

마이크로태스크 큐는 태스크 큐보다 우선순위가 높다.