본문 바로가기
부트캠프교육중/JavaScript

Promise

by 뭉지야 2023. 1. 17.
728x90

promise
Promise는 class이기 때문에 new 키워드를 통해 Promise 객체를 생성한다. 
Promise는 비동기 처리를 수행할 콜백 함수(executor)를 인수로 전달받는데 이 콜백 함수는 resolve, reject 함수를 인수로 전달받습니다.
Promise 객체가 생성되면 executor는 자동으로 실행되고 작성했던 코드들이 작동됩니다. 
코드가 정상적으로 처리가 되었다면 resolve 함수를 호출, 에러가 발생했을 경우에는 reject 함수를 호출하면 됩니다.

resolve("전달해주고싶은값")

reject("에러메세지")

let promise = new Promise((resolve, reject) => {
	//1.정상적으로 처리되는 경우
    resolve(value);
    //2.에러가 발생하는 경우
    reject(error);
    });

 

#내부프로퍼티(state, result)
Promise 객체는 state, result 내부 프로퍼티를 갖습니다. 
하지만 직접 접근할 수 없고 .then, .catch,.finally 의 메서드를 사용해야 접근이 가능합니다.

state
-기본 상태는 pending(대기), 비동기 처리를 수행할 콜백 함수(executor)가 성공적으로 작동했다면 fulfilled (이행)로 변경이 되고, 에러가 발생했다면 rejected (거부)가 됩니다.


Result
처음은 undefined 입니다. 비동기 처리를 수행할 콜백 함수(executor)가 성공적으로 작동하여resolve(value)가 호출되면 value로, 에러가 발생하여 reject(error)가 호출되면 error로 변합니다.


Then (promise.prototype.then)
executor에 작성했던 코드들이 정상적으로 처리가 되었다면 resolve 함수를 호출하고 .then 메서드로 접근할 수 있습니다.
.then 안에서 리턴한 값이 Promise면 Promise의 내부 프로퍼티 result를 다음 .then 의 콜백 함수의 인자로 받아오고, 
Promise가 아니라면 리턴한 값을 .then 의 콜백 함수의 인자로 받아올 수 있습니다. 

const result = [];
promiseOne()
  .then(value => {
    result.push(value);
    return promiseTwo();    //여기서 리턴된 값과 7번줄 value에 들어가는값이 같다!
  })
  .then(value => {
    result.push(value);
    return promiseThree();
  })
  .then(value => {
    result.push(value);
   console.log(result);  
	 // ['1초', '2초', '3초']

 

Catch(promise.prototype.catch)
executor에 작성했던 코드들이 에러발생 -> reject함수 호출 -> .catch메서드로 접근

let promise = new Promise(function(resolve, reject) {
	reject(new Error("에러"))
});

promise.catch(error => {
	console.log(error);  // Error: 에러
})

 

 

Finally
executor에 작성했던 코드들의 정상 처리 여부와 상관없이 .finally 메서드로 접근

let promise = new Promise(function(resolve, reject) {
	resolve("성공");
});

promise
.then(value => {
	console.log(value);     // "성공"
})
.catch(error => {
	console.log(error);     
})
.finally(() => {
	console.log("성공이든 실패든 작동!");    // "성공이든 실패든 작동!"
})

promise chaining
비동기 작업을 순차적으로 진행해야 하는 경우에 필요하다.
Promise chaining이 가능한 이유는 .then,.catch, .finally 의 메서드들은 Promise를 반환하기 때문입니다. 

promise.all()
여러 개의 비동기 작업을 동시에 처리하고 싶을때 사용합니다.
인자로는 배열을 받습니다. 
해당 배열에 있는 모든 Promise에서 executor 내 작성했던 코드들이 정상적으로 처리가 되었다면 결과를
배열에 저장해 새로운 Promise를 반환 해줍니다.
promise chaining에서 같은 코드가 중복되는 현상인 문제를 해결할수있다.
그러나, 인자로 받는 배열에 있는 promise중 하나라도 에러가 발생하면 즉시 종료된다.

promise도 hell이 발생할수있다.

728x90

'부트캠프교육중 > JavaScript' 카테고리의 다른 글

Node.js 모듈  (0) 2023.01.18
Async , Await  (0) 2023.01.17
동기화하는방법  (0) 2023.01.17
타이머관련 API  (0) 2023.01.17
동기, 비동기  (0) 2023.01.17