콜백 / Promise / await 같은 결과로 정리

비동기처리

특정코드의 연산이 끝날때까지 코드의 실행을 멈추지 않고 다음코드를 먼저 실행

특정 조직의 실행이 끝날때까지 기다려주지 않고 나머지 코드를 실행

ex) AJAX 통신, setTimeout

---

setTimeout이란?

타이머가 만료된 뒤 함수나 지정된 코드를 실행하는 타이머를 설정

setTimeout(함수 , 시간 , 매개변수)

ex)

setTimeout((name)=>{console.log(name)},500,'misaka')

0.5초 뒤에 매개변수로 받은 name이 misaka로 misaka가 출력된다.

---

1. 콜백지옥

var userInfo = {
  id: 'test@abc.com',
  pw: '****'
};

function getData(userInfo) {
  setTimeout((val1)=>{
    val1 = userInfo.id;
    setTimeout((val2)=>{
      val2 = val2 + '/1000'
      setTimeout((val3)=>{
        val3 = val3 + '/abcdefg'
        console.log(val3);
      },1000,val2);
    },1000,val1);
  },1000,userInfo.id);
}

getData(userInfo);

첫번째 매개변수는 userInfo.id를 통해 진행하였고 그다음의
두번째 매개변수는 userInfo.id + '/1000'을 추가하였고
세번째 매개변수는 userInfo.id + '/1000' + '/abcdefg을 추가하고 마지막에 출력을 한다.
출력은 3초뒤에 하는 것이다.

---

2. 콜백지옥 함수로 변환

var userInfo = {
  id: 'test@abc.com',
  pw: '****'
};

function getData(userInfo) {
  setTimeout(()=>{parseValue(userInfo.id)},1000);
}

function parseValue(val) {
  setTimeout(()=>{auth(val + '/1000')},1000);
}
function auth(val) {
  setTimeout(()=>{display(val + '/abcdefg')},1000);
}
function display(val) {
  console.log(val);
}


getData(userInfo);

함수로 바꾸어 매개변수를 함수에 넣어 진행한다.
보기에는 나아보이지만 이것 또한 콜백지옥이다.

---

3. Promise 사용하기

Promise
1) pending
2) Fulfilled => resolve
3) reject => reject

new Promise의 경우 내부 어디에 resolve가 있으면 그것을 리턴하는 것이다.

var userInfo = {
  id: 'test@abc.com',
  pw: '****'
};

function getData(userInfo) {
  return new Promise((resolve)=>{
    setTimeout(()=>{resolve(userInfo.id)},1000);
  });
}

function parseValue(val) {
  return new Promise((resolve)=>{
    setTimeout(()=>{(resolve(val + '/1000'))},1000);
  });
}
function auth(val) {
  return new Promise((resolve)=>{
    setTimeout(()=>{(resolve(val + '/abcdefg'))},1000);
  });
}
function display(val) {
  console.log(val);
}

getData(userInfo)
  .then((val)=>parseValue(val))
  .then((val)=>auth(val))
  .then((val)=>display(val));

각각의 함수를 return new Promise((resolve)=>{....})형태로 리턴하고 이를 연결지어 처리하는데

val을 통해 이전 함수에서 return을 통해 반환한 resolve를 val 변수값으로 넣어 then을 통해 다음 함수를 반복해서 진행한다.

---

4. async await

return new Promise 형태의 함수들을 만든 후
async로 된 총괄하는 함수를 만들어 이를 순차적으로 진행하게 await함수를 통해 연결짓는다.

• async로 감싼부분을 await으로 동기적으로 연결짓는다.
  그외부분은 비동기이므로 먼저 실행시킨다.

var userInfo = {
  id: 'test@abc.com',
  pw: '****'
};

function getData(userInfo) {
  return new Promise((resolve)=>{
    setTimeout(()=>{resolve(userInfo.id)},1000);
  });
}

function parseValue(val) {
  return new Promise((resolve)=>{
    setTimeout(()=>{(resolve(val + '/1000'))},1000);
  });
}

function auth(val) {
  return new Promise((resolve)=>{
    setTimeout(()=>{(resolve(val + '/abcdefg'))},1000);
  });
}

function display(val) {
  console.log(val);
}

async function project(){
  const data = await getData(userInfo);
  const parseVal = await parseValue(data);
  const authVal = await auth(parseVal);
  await display(authVal);
}

project();

각각의 내용을 순차적으로 진행시키면서 매개변수로 받아 처리