Promise async await

JS의 비동기🍍

Promise

🏳️ Promise : JS에 내장된 Object로 async한것을 수행할때 콜백함수 대신에 사용하기 좋은 함수

1. Producer

---

const promise = new Promise((reslove, reject) => {
  resolve('junhyeok') //성공했을때
  reject(new Error('뭔가 잘안됐어!'))        //실패했을때
  console.log("asd");
});

위의 코드를 실행시켜보면 바로 'asd'가 출력된다. 즉 Promise는 생성되는 순간 콜백함수를 실행시킨다.

그렇기에 Promise의 생성타이밍을 잘 조절하자.

주로 시간이 많이 걸리는 무거운 일들을 Promise의 콜백함수에 넣어 비동기적으로 처리하자.

2. Consumers : then, catch, finally

---

promise
  .then((success) => {
    console.log(success); // junhyeok
  })
  .catch((error) => {
    cosole.log(error);
  })
  .finally(() => {
    console.log("마지막에 그냥 실행시켜봄");
  });

then은 성공, catch는 실패, finally는 성공하든 실패하든 그냥 실행시킴.

const Abcd = new Promise((resolve, reject) => {
  resolve(1);
});

Abcd.then((success) => {
  //2
  success * 2;
})
  .then((success) => {
    //6
    success * 3;
  })
  .then((success) => {
    return new Promise((resolve, reject) => {
      //5
      resolve(success - 1);
    }).then((success) => {
      console.log(success); //5
    });
  });

then의 안에 Promise생성가능

---

example

class UserStorage {
  //
  loginUser(id, pw) {
    return new Promise((resolve, reject) => {
      if (내가원하는게된다면) {
        resolve(id);
      } else {
        reject(new Error("실패..."));
      }
    });
  }

  getRoles(user) {
    return new Promise((resolve, reject) => {
      if (user === "abc") {
        resolve({ name: "abc", role: "초콜릿" });
      } else {
        reject(new Error("실패.."));
      }
    });
  }
}

UserStorage.loginUser(id, pw)
  .then((id) => {
    UserStorage.getRoles(id);
  })
  .then((user) => {
    console.log(`${user.name} , ${user.role} 입니다.`);
  })
  .catch(console.log);

요약 : loginUser에 id와pw를 넣고 조건문에 성립하면 그값을 getRoles에 넣어주고 getRoles의 조건이 성립하면 출력한다.

async and await

🏳️ async and await : Promise를 더 간단하게 해주며 좀 더 동기적으로 보이게 해준다.

async

function Abcd() {
  return new Promise((resolve, reject) => {
    resolve("abc");
  });
}

//========================================================================

async function Abcd() {
  return "abc";
}

async를 함수 앞에 쓰면 코드블럭이 Promise 기능을 할 수 있게 해준다.

---

await

async function Abcd() {
  const a = await delay(3000);
  return a;
}

async를 써야지만 await을 사용할 수 있다.(3초간 대기 후 변수a의 값 출력)

async function Abcd() {
  try {
    const a = await getA();
    const b = await getB();
  } catch (error) {
    console.log;
  }

  return `${a} + ${b}`;
}

동기적으로 코드를 작성할 수 있다. then 처리를 await으로 대체

병렬적 처리

function Abcd() {
  return Promise.all([getA(), getB()]).then((배열) => console.log(배열));
}

//==================================================================================

function Abcd() {
  return Promise.race([getA(), getB()]);
}

Abcd().then((두개중빠른것) => console.log(두개중빠른것)); // then(console.log)

all이란 메서드를 통해 병렬적으로 수행하여 배열에 담을 수 있고 race를 통해 가장빨리 끝나는 값만 받을 수 있다.

요약 : async await은 동기적으로 코드를 작성할 수 있게 해줌으로써 좀 더 직관적이다. Promise 체이닝으로 작성을 한다면 변수의 생명주기가 명확하지만 이것은 언제든지 쓰일 수 있다. 물론 이것이 단점이 될 수 도 있다.