[JS] chapter19. 비동기1 - java script

 

 

 

 

 

 

 

📌 비동기

 

 

- 동기(synchronous)

동기 처리란, 특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것

 

- 비동기(asynchronous)

비동기 처리란, 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 수행하는 것

js는 싱글 스레드 기반 동작 언어라서 동기적 작동이지만 환경(런타임)에서 비동기 처리를 도와주기 때문에

비동기 처리 또한 가능하다.

비동기는 순서대로 작동하지 않는 것을 기억하자!

 

 

 

 

⏱ 타이머 관련 API

비동기 첫번째 단계 타이머 관련 API

 

 

 

setTimeout(callback, millisecond)

 

일정 시간 후에 함수를 실행

 

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

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

 

 

clearTimeout(timerId)

 

setTimeout 타이머를 종료

 

• 매개변수(parameter): 타이머 ID
• return 값: 없음

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

 

setInterval(callback, millisecond)

 

일정 시간의 간격을 가지고 함수를 반복적으로 실행

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

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

 

clearInterval(timerId)

 

setInterval 타이머를 종료

• 매개변수: 타이머 ID
• return 값: 없음

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

 

 

 

 

비동기로 작동하는 코드를 제어할 수 있는 방법1 - 콜백함수

 

 

제어하지 않은 코드

 

// 터미널에 `node index.js`를 입력하여 비동기 코드가 작동하는 순서를 확인해보세요.
const printString = (string) => {
  setTimeout(function () {
    console.log(string);
  }, Math.floor(Math.random() * 100) + 1);
};

const printAll = () => {
  printString('A');
  printString('B');
  printString('C');
};

printAll();

console.log(`아래와 같이 비동기 코드는 순서를 보장하지 않습니다!`);

 

 

제어된 코드

 

주의사항

 

📍 코드가 길어지고 복잡할 수록 가독성의 낮아지는 단점이 있다.

 

// 터미널에 `node index.js`를 입력하여 비동기 코드가 작동하는 순서를 확인해보세요.
const printString = (string, callback) => {
  setTimeout(function () {
    console.log(string);
    callback(); // 콜백함수를 통해 순서를 제어할 수 있다
  }, Math.floor(Math.random() * 100) + 1);
};

const printAll = () => {
  printString('A', () => {
    printString('B', () => {
      printString('C', () => {});
    });
  });
};

printAll();

console.log(
  `아래와 같이 Callback 함수를 통해 비동기 코드의 순서를 제어할 수 있습니다!`
);

 

 

비동기로 작동하는 코드를 제어할 수 있는 방법2 - Promise

 

new Promise

 

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

또한 Promise는 비동기 처리를 수행할 콜백 함수(executor)를 인수로 전달받는데

이 콜백 함수는 resolve, reject 함수를 인수로 전달

 

promise 객체 생성 -> resolve 함수 호출 -> 에러 발생 경우 reject 함수 호출

 

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

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

 

promise 객체 내부 프로퍼티

 

state : 대기

result : undefined -> value -> error

then : .then 메서드 접근

 

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

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

 

catch : 에러 발생시 reject 함수 호출

 

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

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

 

finally : 정상 처리 여부 관계 없이 finally메서드로 접근

 

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

 

Promise.all()은 여러 개의 비동기 작업을 동시에 처리하고 싶을때 사용

 

const promiseOne = () => new Promise((resolve, reject) => setTimeout(() => resolve('1초'), 1000));
const promiseTwo = () => new Promise((resolve, reject) => setTimeout(() => resolve('2초'), 2000));
const promiseThree = () => new Promise((resolve, reject) => setTimeout(() => resolve('3초'), 3000));

 

기존 Promise chaining을 promise.all로도 해결 가능

 

// promise.all
Promise.all([promiseOne(), promiseTwo(), promiseThree()])
  .then((value) => console.log(value))
  // ['1초', '2초', '3초']
  .catch((err) => console.log(err));

 

+ Promise.all()은 하나라도 에러가 발생 하면 즉시 종료

ex) 1초 후에 에러가 발생하고 error:1이 반환된 후로는 작동 x

 

Promise.all([
	new Promise((resolve, reject) => setTimeout(() => reject(new Error('에러1'))), 1000),
	new Promise((resolve, reject) => setTimeout(() => reject(new Error('에러2'))), 2000),
	new Promise((resolve, reject) => setTimeout(() => reject(new Error('에러3'))), 3000),
])
	.then((value) => console.log(value))
  .catch((err) => console.log(err));
	// Error: 에러1

 

 

Promise Hell

 

Promise를 통해 비동기 코드의 순서를 제어할 수 있지만 Callback 함수와 같이 코드가 길어질수록 복잡해지고

가독성이 낮아지는 Promise Hell이 발생하는 단점이 있다

 

const printString = (string) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(string);
    }, Math.floor(Math.random() * 100) + 1);
  });
};

const printAll = () => {
  printString('A').then((value) => {
    console.log(value);

    printString('B').then((value) => {
      console.log(value);

 

 

 

 

 

🪄 Async/Await (중요)

 

복잡한 promise 코드 대신 간결하게 작성 가능

함수 안에 async 키워드를 사용하고 async 함수 내에서만 await 키워드를 사용