[JS & Node] 비동기

비동기(asynchronous)

: 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드들을 수행하는 것을 의미

타이머 관련 API

• setTimeout(callback, millisecond)
  일정 시간 후에 함수를 실행
  매개변수(parameter): 실행할 콜백 함수, 콜백 함수 실행 전 기다려야 할 시간 (밀리초)
  return 값: 임의의 타이머 ID

ex)

setTimeout(function () {
  console.log('1초 후 실행');
}, 1000);
// 123

• clearTimeout(timerId)
  setTimeout 타이머를 종료
  매개변수(parameter): 타이머 ID
  return 값: 없음

ex)

const timer = setTimeout(function () {
  console.log('10초 후 실행');
}, 10000);
clearTimeout(timer);
// setTimeout이 종료됨.

• setInterval(callback, millisecond)
  일정 시간의 간격을 가지고 함수를 반복적으로 실행
  매개변수(parameter): 실행할 콜백 함수, 반복적으로 함수를 실행시키기 위한 시간 간격 (밀리초)
  return 값: 임의의 타이머 ID

ex)

setInterval(function () {
  console.log('1초마다 실행');
}, 1000);
// 345

• clearInterval(timerId)
  setInterval 타이머를 종료
  매개변수: 타이머 ID
  return 값: 없음

ex)

const timer = setInterval(function () {
  console.log('1초마다 실행');
}, 1000);
clearInterval(timer);
// setInterval이 종료됨.

Promise

Promise는 class이기 때문에 new 키워드를 통해 Promise 객체를 생성

let promise = new Promise((resolve, reject) => {
	// 1. 정상적으로 처리되는 경우
	// resolve의 인자에 값을 전달할 수도 있습니다.
	resolve(value);

	// 2. 에러가 발생하는 경우
	// reject의 인자에 에러메세지를 전달할 수도 있습니다.
	reject(error);
});

new Promise가 반환하는 Promise 객체는 state, result 내부 프로퍼티를 갖습니다. 하지만 직접 접근할 수 없고 .then, .catch, .finally 의 메서드를 사용해야 접근이 가능합니다.

• Then
  .then 안에서 리턴한 값이 Promise면
  : Promise의 내부 프로퍼티 result를 다음 .then 의 콜백 함수의 인자로 받아오고,
  Promise가 아니라면
  : 리턴한 값을 .then 의 콜백 함수의 인자로 받아올 수 있습니다.

ex)

let promise = new Promise((resolve, reject) => {
	resolve("성공");
});

promise.then(value => {
	console.log(value);
	// "성공"
})

• Catch
  작성했던 코드들이 에러가 발생했을 경우에는 reject 함수를 호출하고 .catch 메서드로 접근

ex)

let promise = new Promise(function(resolve, reject) {
	reject(new Error("에러"))
});

promise.catch(error => {
	console.log(error);
	// Error: 에러
})

• Finally
  작성했던 코드들의 정상 처리 여부와 상관없이 .finally 메서드로 접근할 수 있다.

ex)

let promise = new Promise(function(resolve, reject) {
	resolve("성공");
});

promise
.then(value => {
	console.log(value);
	// "성공"
})
.catch(error => {
	console.log(error);
})
.finally(() => {
	console.log("성공이든 실패든 작동!");
	// "성공이든 실패든 작동!"
})

Promise chaining

Promise chaining가 필요하는 경우는 비동기 작업을 순차적으로 진행해야 하는 경우
Promise chaining이 가능한 이유는 .then, .catch, .finally 의 메서드들은 Promise를 반환하기 때문
따라서 .then을 통해 연결할 수 있고, 에러가 발생할 경우 .catch 로 처리하면 된다.

let promise = new Promise(function(resolve, reject) {
	resolve('성공');
	...
});

promise
  .then((value) => {
    console.log(value);
    return '성공';
  })
  .then((value) => {
    console.log(value);
    return '성공';
  })
  .then((value) => {
    console.log(value);
    return '성공';
  })
  .catch((error) => {
    console.log(error);
    return '실패';
  })
  .finally(() => {
    console.log('성공이든 실패든 작동!');
  });

Promise.all()

: 여러 개의 비동기 작업을 동시에 처리하고 싶을때 사용

// 기존
const result = [];
promiseOne()
  .then(value => {
    result.push(value);
    return promiseTwo();
  })
  .then(value => {
    result.push(value);
    return promiseThree();
  })
  .then(value => {
    result.push(value);
   console.log(result);  
	 // ['1초', '2초', '3초']
  })
  
  // promise.all
Promise.all([promiseOne(), promiseTwo(), promiseThree()])
  .then((value) => console.log(value))
  // ['1초', '2초', '3초']
  .catch((err) => console.log(err));

Async/Await

함수 앞에 async 키워드를 사용하고 async 함수 내에서만 await 키워드를 사용하면 됩니다. 이렇게 작성된 코드는 await 키워드가 작성된 코드가 동작하고 나서야 다음 순서의 코드가 동작하게 됩니다.

// 함수 선언식
async function funcDeclarations() {
	await 작성하고자 하는 코드
	...
}

// 함수 표현식
const funcExpression = async function () {
	await 작성하고자 하는 코드
	...
}

// 화살표 함수
const ArrowFunc = async () => {
	await 작성하고자 하는 코드
	...
}