[javascript] react 들어가기 전! javascript 복습 (실전3)

7. 동기 / 비동기

function taskA(a, b, cb) {
  // console.log("A 작업 끝");
  setTimeout(() => {
    const res = a + b;
    cb(res);
    //console.log("A TASK END");
  }, 3000);
}

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

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

taskA(3,4, (res) =>{
  console.log("A TASK RESULT : ", res);
});

taskB(7, (res) =>{
  console.log("B TASK RESULT : ", res);
});

taskC(14, (res) =>{
  console.log("C TASK RESULT : ", res);
});

console.log("코드 끝");

 

결과 :

 

function taskA(a, b, cb) {
  // console.log("A 작업 끝");
  setTimeout(() => {
    const res = a + b;
    cb(res);
    //console.log("A TASK END");
  }, 3000);
}

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

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

// taskA(3, 4, (res) =>{
//   console.log("A TASK RESULT : ", res);
// });

// taskB(7, (res) =>{
//   console.log("B TASK RESULT : ", res);
// });

// taskC(14, (res) =>{
//   console.log("C TASK RESULT : ", res);
// });

taskA(4,5,(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("코드 끝"); //

 

결과 : 

---

8. promise (비동기처리 함수에 도움)

 

function isPositive(number, resolve, reject) {
  setTimeout(() => {
    if (typeof number === "number"){
      //성공 -> resolve
      resolve(number >= 0 ? "양수" : "음수");
    } else {
      //실패 -> reject
      reject("숫자형이 아닙니다");
    }
  }, 2000);
}

function isPositiveP(number){
  const executor = (resolve, reject) => { //실행자
    setInterval(() => {
      if (typeof number === "number"){
        //성공 -> resolve
        console.log(number);
        resolve(number >= 0 ? "양수" : "음수");
      } else {
        //실패 -> reject
        reject("숫자형이 아닙니다");
      }
    }, 2000);
  };

  const asyncTask = new Promise(executor);
  return asyncTask;
}

const res = isPositiveP(101);

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


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

 

 

 

객체 메서드 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

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);
    }, 1000);
  });
}

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

// then 체이닝 방법
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);
});


// 콜백 방법
// taskA(5, 1).then((a_res) => {
//   console.log("A RESULT :", a_res);
//    taskB(a_res).then((b_res) => {
//      console.log("B RESULT:", b_res);
//        taskC(b_res).then((c_res) => {
//          console.log("C RESULT:", c_res);
//        });     
//     });
// });


// taskA(3, 4, (a_res) => {
//   console.log("TASK A :", a_res);
//   taskB(a_res,(b_res) => {
//     console.log("TASK B :", b_res);
//       taskC(b_res,(c_res) => {
//         console.log("TASK C :", c_res);
//       });     
//    });
// });

 

결과 :