21同期および非同期処理

2277 ワード

*同期処理
::入力順に処理して出力します.各格の処理速度を1秒とすると、5秒かかる.
  • 非同期処理
  • 1)Promiseとasync-await
    ::同期処理と非同期処理を別々にし、非同期を順番に処理して出力します.(5秒)
    console.log('start');
    
    비동기적으로 처리 
    {
     const f1 = (sec) => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve('1번');
          }, sec * 1000)
        })
      };
    
      const f2 = (sec, message) => {
        console.log(message);
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve('2번');
          }, sec * 1000)
        })
      };
     
      const f3 = (sec, message) => {
        console.log(message);
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve('3번');
          }, sec * 1000)
        })
      };
     
      f1(2)
        .then((res) => f2(1, res))
        .then((res) => f3(1, res))
        .then((res) => console.log(res))
    }
    
    console.log('end');
    
    // start
    // end
    // 1번 (2초)
    // 2번 (1초)
    // 3번 (1초)
    2) Promise.all
    ::同期処理と非同期処理を分離し、非同期並列処理を出力します.(3秒)
    console.log('start');
    
    비동기적으로 처리 
    {
     const f1 = (sec) => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve('1번');
          }, sec * 1000)
        })
      };
    
      const f2 = (sec, message) => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve('2번');
          }, sec * 1000)
        })
      };
     
      const f3 = (sec, message) => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve('3번');
          }, sec * 1000)
        })
      };
     
      Promise.all([f1(1), f2(1), f3(1)]).then(result => console.log(result);
    }
    
    console.log('end');
    
    // start
    // end
    // ["1번", "2번", "3번"] (1초)
    注意:https://code-masterjung.tistory.com/91