Javascript - 비동기 async, await

Promise 안에 있는 콜백함수는 동기적
.then 함수 안은 비동기적으로 처리를 한다.

async function 함수() {
  console.log(1)
  
  var promise = new Promise((res,rej)=>{
    res()
  }
  const data = await promise
  console.log(2)
  return data
}

const result = 함수()
console.log(3)

예상 결과 값은

console.log(1)
console.log(2)
console.log(3)

위 와 같이 예상 하였으나,
아래의 코드와 같이 나왔다.

console.log(1)
console.log(3)
console.log(2)

어떻게 된것일까?

Promise라는 개념부터 다시 생각해보자면

Promise 안에 있는 콜백함수는 동기적
.then 함수 안은 비동기적으로 처리를 한다. 무슨 말인고 하냐면

case1

     console.log(1);
     console.log(2);
     var 프로미스 = new Promise(function (resolve, reject) {
       setTimeout(() => {
         console.log(3);
         resolve();
       }, 2000);
     });
     console.log(4);
     console.log(5);

// ----------- result
/*
1
2
4
5
2sec after 3
*/

어? 프로미스의 콜백 안에서는 동기적이라고 했는데.. 라고 하지 말자

자바스크립트는 from to -> to Bottom 으로 훑는데,

당연히 setTimeout은 브라우저에서 치워버리니까 3번과 4번이 먼저찍히는 것

괜시리 개념 헷갈릴까바 우선 다지고 가는 Case1번이었다.

case2

     console.log(1);
     console.log(2);
     var promise = new Promise(function (resolve, reject) {
		console.log(3)
        resolve();
     });
	 console.log(4);
	 console.log(5);

//----------------result
/*
1
2
3
4
5
*/

순차적으로 나온다. 정상적이다.

case 3

      console.log(1);
      console.log(2);
      var promise = new Promise(function (resolve, reject) {
        console.log(3);
        resolve(4);
      }).then((result) => console.log(result));
      console.log(5);
      console.log(6);
// -------------result
/*
1
2
3
5
6
4
*/

내말이 맞지??

프로미스 안 콜백함수는 동기적으로 처리하고 then 안에는 비동기적으로 자바스크립트가 잠깐 제쳐두고 아래의

console.log(5)
console.log(6)
먼저 훑고 result를 찍어줬다.

case4

     console.log(1);
     console.log(2);
     var promise = new Promise(function (resolve, reject) {
       setTimeout(() => {
         console.log(3)
         resolve();
       }, 2000);
     });

       promise
       .then(function (구멍) {
         console.log("성공했어요");
       })
       .catch(function () {
         console.log("실패했어요");
       });
     console.log(4);
     console.log(5);

//------------- 결과값

/*
1 ------------1번
2 ------------2번
4 ------------3번
5 ------------4번
3 ------------5번
'성공했어요' ---6번
*/

그렇다면 내가 원하는 동기적 처리를 하려면??

      console.log(1);
      console.log(2);
      var promise = new Promise(function (resolve, reject) {
        setTimeout(() => {
          console.log(3);
          resolve();
        }, 2000);
      });

      promise
        .then(function (구멍) {
          console.log("성공했어요");
        })
        .then(() => console.log(4)) // then 안으로 넣어주면 되잖슴
        .then(() => console.log(5));