[TIL] 자바스크립트 공부 11일차

프로미스

프로미스는 비동기처리에 사용되는 객체로, 영어를 직역하자면 약속이라는 뜻이다.
잘 사용한다면 비동기 작업을 순차적으로 하거나 병렬로 진행할 수 있다.

let promise = new Promise(function(resolve, reject) {
  //제작코드
});

문법은 위와 같습니다.
새로운 객체를 생성하고 executor을 이용하면 Promise가 만들어지면
자동으로 실행시켜주는 함수다.
함수 인자 안에 resolve와 reject가 있는데 이는 자체 제공해주는 콜백이다.

resolve(value) - 일이 성공적으로 끝나면 value와 함께 호출
reject(error) - 에러 발생 시 error와 함께 호출

즉, executor안의 코드의 성공 여부에 따라 resolve나 reject를 호출한다.

그리고 promise객체는 내부 프로퍼티가 있는데,

state - 처음엔 pending, 호출 시 fulfilled, reject가 호출되면 rejected로 변한다.
result - 처음엔 undefined, resolve가 호출되면 value, reject가 호출되면 error로 변한다.

코드가 사용되는 것을 보면서 이해해보자.

//성공코드
let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("done"), 1000);
});

위 코드가 실행되면 1초 후에 promise의 result는 "done"이 되고,
state는 "fulfilled"가 된다.

//에러 코드
let promise = new Promise(function(resolve, reject) {
  setTimeout(() => reject(new Error("에러 발생!")), 1000);
});

위 코드는 reject가 호출되었으므로 promise는 "rejected"가 됩니다.

async await

이 문법을 이용한다면 프로미스를 더 편하게 사용할 수 있습니다.
function 앞에 async이 붙고, await를 붙이면 프로미스 처리가 될 때 까지 대기합니다.

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

굉장히 간단하고 유용하게 사용할 수 있습니다!

느낀점

사실 프로미스나 이런 것들 대부분 들어보기만 하고 잘 모릅니다..
하지만 async await를 들었을 때 자주 사용하던 것이라 반가웠지만
막상 async await를 자세히 공부하니 제가 아는 것이 없었습니다..
프로미스를 간단하게 사용하기 위한 것이라는 것 자체도 모르고
그냥 사용했던 제가 다 부끄럽네요..
더 열심히 공부해야겠습니다!