<Java Script> callback, promise 예시

1. callback

callback없이 함수 쓰면 이렇게 쓰는데,

<script>

function taskA (){
 setTimeout(()=> {
   console.log("A task END");
 }, 2000);
}

taskA();
console.log("코드 끝");

</script>

callback을 넣으면?

<script>

function taskA (a,b, cb){
  setTimeout(()=> {
    const res = a+b;
    cb(res);
  }, 2000);
}

taskA(3,4, (res) => {
  console.log("a tesk result : ", res);
});
console.log("코드 끝");


</script>

조금 더 해보면

<script>

function taskA (a,b, cb){
  setTimeout(() => {
    const res = a+b;
    cb(res);
  }, 3000);
}

function taskb(a, cb) {
  setTimeout(() => {
    const res = a*2;
    cb(res);
  }, 2000);
};

function taskc(a, cb) {
  setTimeout(()=> {
    const res = a*-1;
    cb(res);
  }, 1000);
}


taskA(3,4, (res) => {
  console.log("a tesk result : ", res);
});

taskb(7, (res) => {
  console.log("b tesk result : ", res);
});

taskc(14, (res) => {
  console.log("c tesk result : ", res);
});
 
console.log("코드 끝");


//출력순 
//코드끝 -> taskc -> taskb -> taskA

</script>

<script>

function taskA (a,b, cb){
  setTimeout(() => {
    const res = a+b;
    cb(res);
  }, 3000);
}

function taskb(a, cb) {
  setTimeout(() => {
    const res = a*2;
    cb(res);
  }, 2000);
};

function taskc(a, cb) {
  setTimeout(()=> {
    const res = a*-1;
    cb(res);
  }, 1000);
}

//비동기 -> 비동기 -> 비동기 
taskA(3,4, (a_res) => {
  console.log("a result : ", a_res);
  taskb(a_res,(b_res)=>{
    console.log("b result : ", b_res);
    taskc(b_res,(c_res) =>{
      console.log("c result : ", c_res);
    });
  });
});

console.log("코드 끝");

</script>

2. promise

<script>

function isPositive(number,resolve, reject){
  setTimeout(() => {
    if(typeof number === 'number'){
      //비동기 작업 성공 -> resolve
        resolve(number >= 0? "양수" : "음수")
    } else {
      // 실패 -> reject
      reject("주어진 값이 숫자형이 아닙니다.")
    }
  }, 2000)
}

isPositive(10, (res) => {
  console.log("성공적으로 수행됨 : ", res);
},
(err) => {
  console.log("실패하였음 : ", err);
}
);

</script>

<script>

function isPositiveP (number){
  const executor = (resolve,reject) => {
    setTimeout(()=> {
      if(typeof number === 'number'){
        //비동기 작업 성공 -> resolve
        console.log(number);
          resolve(number >= 0? "양수" : "음수")
      } else {
        // 실패 -> reject
        reject("주어진 값이 숫자형이 아닙니다.")
      }
    }, 2000);
  };
  const asyncTask = new Promise(executor);
  return asyncTask;
}

isPositiveP(101);





//수정  -> 

const res = isPositiveP(101);

res
.then(() =>{console.log("작업성공: " + res );
})
.catch((err) => {
  console.log("작업실패 : ", err);
});

</script>

//promise사용 -> 깔끔한 비동기 처리 가능 하게 함

<script>

const { reject } = require("lodash");

function taskA(a, b) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a + b;
      resolve(res);
    }, 3000);
  });
}

function taskB(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a * 2;
      resolve(res);
    }, 2000);
  });
}

function taskC(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a * -1;
      resolve(res);
    }, 1000);
  });
}

taskA(5, 1)
  .then((a_res) => {
    console.log("A_RESULT :", a_res);
    return taskB(a_res);
  })
  .then((b_res) => {
    console.log("B result : ", b_res);
    return taskC(b_res);
  })
  .then((c_res) => {
    console.log("c result:", c_res);
  });

</script>

3. async & await

<script>
//async 

async function helloAsync(){
  return 'hello Async';
}


helloAsync().then((res) => {
  console.log(res);
});

</script>

<script>

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function helloAsync() {
  return delay(3000).then(() => {
    return "hello Async";
  });
}

helloAsync().then((res) => {
  console.log(res);
});




//awit 넣기

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function helloAsync() {
  await delay(3000);  //await 키워드가 붇으면 비동기함수도 동기적으로 작동
    return "hello Async";
}

helloAsync().then((res) => {
  console.log(res);
});

</script>

<script>

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function helloAsync() {
  await delay(3000);
    return "hello Async";
}

async function main(){
 const res = await helloAsync();
 console.log(res);
}
main();

</script>