자바스크립트에서 비동기 처리 하는 방법 3가지

동기 vs 비동기

동기 (Synchronous)

비동기 (Asynchronous)

자바스크립트에서의 동기와 비동기

• Callback Function

• Promise

• Async / Await

Callback Function

const print = str => {
  setTimeout(() => {
    console.log(str);
  }, Math.floor(Math.random() * 1000) + 500);
};

print('First');
print('Second');
print('Third');

// 콜백 함수 전달 받아 실행
const func = callback => {
  callback();
};

// 인자 없는 콜백 함수
const callbackWithNoArgs = () => {
  console.log('This is callback function! - no args');
};

// 인자 있는 콜백 함수
const callbackWithOneArg = str => {
  console.log(`This is callback function! - ${str}`);
};

// 인자 없는 콜백함수 전달
func(callbackWithNoArgs);

// 인자 있는 콜백함수 전달
func(() => {
  callbackWithOneArg('test');
});

const print = (str, callback) => {
  setTimeout(() => {
    console.log(str);
    callback();
  }, Math.floor(Math.random() * 1000) + 500);
};

print('First', () => {
  print('Second', () => {
    print('Third', () => {});
  });
});

Promise

• pending: 초기 상태
Promise 객체가 처음 생성되고 초기 상태를 의미한다.

• fulfilled: 프로세스 처리가 완료됨
Promise 객체에서 모든 프로세스 처리가 완료됨을 의미하고, resolve() 메소드를 사용하여 원하는 리턴 값을 전달할 수 있다.

• rejected: 프로세스 처리가 실패함
Promise 객체에서 프로세스 처리가 실패했음을 의미하고, reject() 메소드를 사용하여 원하는 리턴 값을 전달할 수 있다.
 

const print = str => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 추가된 부분
      const val = Math.floor(Math.random() * 10 + 1);
      if (val % 2 === 0) {
        console.log(str);
        resolve();
      } else {
        reject('The random number is odd!'); // 실패 메시지 반환
      }
    }, Math.floor(Math.random() * 1000) + 500);
  });
};

print('First')
  .then(() => {
    return print('Second');
  })
  .then(() => {
    return print('Third');
  })
  .catch(err => {
    console.log(err);
  });

Async / Await

const print = str => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const val = Math.floor(Math.random() * 10 + 1);
      if (val % 2 === 0) {
        console.log(str);
        resolve();
      } else {
        reject('The random number is odd!');
      }
    }, Math.floor(Math.random() * 1000) + 500);
  });
};

const printAll = async () => {
  try {
    await print('First');
    await print('Second');
    await print('Third');
  } catch (e) {
    console.log(e);
  }
};

printAll();

결론