javascript promise

promise

좀 직관적으로 설명해보고자 블로그로 정리하고 있다.

추가적인 내용이 있다면 한번씩 수정할 예정

중요한 점은 왜 프로미스를 써야하는가란 점이다.
react를 공부하다보면 비동기를 처리해야하는 곳이 점차 많아진다.
비동기를 좀 더 명확하게 보관하고 반환하는 작업을 하는 javascript function이 바로 Promise라는 것을 알고 강의를 찾아서 들었다.

콜백지옥 처리와 비동기 함수를 원하는 때에 쓸 수 있다는 것은 리엑트 개발을 해보니 중요한 것을 알게 되었다. 예를 들어 setstate 같은 기능이 비동기이기 때문에 promise를 이용하거나 async 를 써보는 방식도 가능하지 않을까? 아직 확실하지 않지만 가능성이 있어보인다. 그렇게 쓴다면 원하는 데이터를 보다 동적으로 쓰기위해서라도 promise 개념은 정확하게 숙지할 필요가 있어보인다

밑의 내용은 공식문서 내용을 내 방식으로 정리해보았다.

1. Promise 는 객체이다
2. new 키워드와 생성자를 필요로 한다
3. 결과 값으로 성공과 실패를 반환한다
4. 성공값은 resolve 로 반환되면 비동기 작업이 성공적일 경우에만 반환된다
5. 실패값은 reject 로 반환되며 작업이 실패하여 보통 오류값이 있을경우에 반환된다

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

promise1.then((value) => {
  console.log(value);
  // expected output: "foo"
});

console.log(promise1);
// output: [object Promise]

Promise.all(iterable)

한번에 많은 양의 비동기 처리를 담당할때나 여러 프로미스의 결과를 집계할 때 유용하게 사용가능하다.

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

순회 가능한 객체(promise1,promise2,promise3)에 프로미스가 아닌 값이 들어있다면 무시하지만, 이행 시 결과 배열에는 포함합니다.

Promise.allSettled()

주어진 모든 프로미스가 실행되는 것은 Promise.all과 같지만
각 프로미스에 대한 결과값도 확인해준다.

1. 대기(pending): 이행하지도, 거부하지도 않은 초기 상태.
2. 이행(fulfilled): 연산이 성공적으로 완료됨.
3. 거부(rejected): 연산이 실패함.

위의 두개의 all기능과 allSettled기능은 비동기데이터or이벤트를 한번에 실행할때 좋은 방식이라고 생각한다. 실전에 사용한다면 한번 더 여기에 추가할 예정이다