async/await 순서대로 처리하고 싶을 때의 쓰기

사전 지식

콜백 함수 사용

setTimeout( function(){ console.log(3) } ,1000 );
setTimeout( function(){ console.log(2) } ,2000 );
setTimeout( function(){ console.log(1) } ,3000 );

setTimeout( () => console.log(3) ,1000 );
setTimeout( () => console.log(2) ,2000 );
setTimeout( () => console.log(1) ,3000 );

지옥으로 돌아가다

setTimeout( function() {
  console.log(3);
  setTimeout( function() {
    console.log(2);
    setTimeout( function(){
      console.log(1);
    },1000);
  },1000);
} ,1000);

setTimeout( function() { console.log(3);
  setTimeout( function() { console.log(2);
    setTimeout( function(){ console.log(1); },1000); },1000); } ,1000);

setTimeout( () => {
  console.log(3);
  setTimeout( () => {
    console.log(2);
    setTimeout( () => {
      console.log(1);
    },1000);
  },1000);
} ,1000);

Promise

new Promise(resolve => {
  setTimeout(() => {
    console.log(3);
    resolve();
  },1000);
}).then(() => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(2);
      resolve();
    },1000)
  });
}).then(() => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(1);
      resolve();
    },1000)
  });
});

async/await

func = async() => {
  await log(3);
  await log(2);
  await log(1);
}

log = (num) => {
  return new Promise(resolve => {
    setTimeout(()=>{
      console.log(num);
      resolve();
    },1000)
  });
}

func();

메시지

비동기 처리

function lightTask() {
  console.log("HIRO.です。");
}
 
function heavyTask() {
  const procedure = () => {
    console.log("僕の名前は");
  }
  setTimeout(procedure, 1000);
}
 
function sample() {
  heavyTask();
  lightTask();
}
 
sample();

순서대로 처리하다

function lightTask() {
  console.log("HIRO.です。");
}

function heavyTask() {

  return new Promise((resolve) => {//Promise型を返す

    function procedure() {
      console.log("僕の名前は");
      resolve();
    }

    setTimeout(procedure, 1000);

  });

}

async function sample() {
  await heavyTask();
  lightTask();
}

sample();

then 메서드 사용

function lightTask() {
  console.log("HIRO.です。");
}

function heavyTask() {

  return new Promise((resolve) => {//Promise型を返す

    function procedure() {
      resolve("僕の名前は");
    }

    setTimeout(procedure, 1000);

  });

}

async function sample() {
  await heavyTask().then(
    (value)=>{console.log(value);}//heavyTaskが終わってからじゃないとconsole.logは表示されない
  );
  lightTask();
}

sample();