[JS/Node] 211014 비동기 복습 및 추가공부

📌 비동기

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미.(또 다른게는 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것) 동기는 요청에 대한 결과가 동시에 일어나고, 비동기는 요청에 대한 결과가 동시에 일어나지 않는다.

☑ 비동기 처리 사례 : setTimeout()

비동기 처리의 가장 대표적인 예는 setTimeout()이다.

// #1
console.log('Hello World');
// #2
setTimeout(function() {
	console.log('Bye World');
}, 3000);
// #3
console.log('love Coding');

setTimeout은 비동기 방식으로 실행되기 때문에 이것을 실행해보면 다음과 같다

• 1) Hello World가 찍히고
• 2) love coding이 찍히고
• 3) 마지막으로 Bye World가 찍히게 된다.

자바스크립트의 이러한 특징을 해결하기 위한 것이 바로 콜백함수 이다.

☑ 콜백함수?

다른 함수의 전달인자로 넘겨주는 함수

function insertText() {
  console.log('loveCoding')
}
function A(callback) {
  callback(); // callback === insertText
}
A(insertText)

여기서 콜백함수는 insertText이다.

☑ 비동기 주요 사례

• DOM
  1) 마우스/키보드 입력
  2) 페이지 로딩
• 타이머
  1) 타이머 API
  2) 애니메이션 API
• 서버에 자원요청 및 응답

📌 Async

간단하고 가독성 좋게 비동기 처리를 동기처리처럼 동작하도록 구현할 수 있는 async/await가 ES8에서 도입된다. async/await 는 프로미스를 기반으로 동작한다.

• await 키워드는 반드시 async 함수 내부에서 사용해야 한다.
  아래는 예시이다.(foo함수는 서로 연관없이 개별적으로 수행되는 비동기 이기에 완료될때까지 대기해서 처리할 필요 없으므로 promise all을 써서 처리하는게 효율적이다)

async function foo() {
  const a = await new Promise(resolve => setTimeout(() => resolve(1), 3000));
  const a = await new Promise(resolve => setTimeout(() => resolve(2), 2000));
  const a = await new Promise(resolve => setTimeout(() => resolve(3), 1000));
console.log([a,b,c]); //1,2,3
}
foo(); // 총 6초 소요

Promise 는 주로 생성자 함수로 사용되지만 함수도 객체이므로 메서드를 가질 수 있다. Promise는 5가지 정적 메서드를 제공한다.

📌 Promise.resolve

MDN 에서는 다음과 같이 정의하고 있다. Promise.resolve(value) 메서드는 주어진 값으로 이행하는 Promise.then 객체를 반환합니다. 프로미스 함수의 리졸브 메소드. 인수로 전달받은 값을 resolve(해결)하는 프로스미스를 생성한다.

책에서 예제를 가져왔다.

• Promise.resolve

//배열을 resolve하는 프로미스를 생성
const resolvedPromise = Promise.resolve([1,2,3])
resolvedPromise.then(console.log) 

or

const resolvedPromise = new Promise(resolve => resolve([1,2,3))
resolvedPromise.then(console.log)

📌 Promise.reject

Promise.reject(reason) 메서드는 주어진 이유(reason)로 거부된 Promise 객체를 반환합니다 프로미스 리젝트 메서드는 인수로 전달받은 값을 reject(거절)하는 프로미스를 생성. 에러를 설정한다.

이것도 책에서 예제를 가져왔다.

• Promise.reject

//에러 객체를 reject하는 프로미스를 생성
const rejectedPromise = Promise.resect(new Error('Error!'))
rejectedPromise.catch(console.log) //Error : Error!

or

const rejectedPromise = new Promise((_, reject) => reject(new Error('Error!')))
rejectedPromise.catch(console.log) //Error : Error!

스프린트를 진행할 때 new Promise(프로미스를 생성)를 작성하고 난 뒤에 resolve/reject를 인자로 넣어서 코드를 짰다. 그리고 성공적으로 이행됐을 때와 그렇지 않을 때는 에러가 나도록 작성했다.

📌 Promise all

Promise all 메서드는 여러 개의 비동기 처리를 모두 병렬 처리할 때 사용한다. 책에서 가져온 예제를 살펴보자.

const requestData1 = () =>
  new Promise(resolve => setTimeout(() => resolve(1), 3000));
const requestData2 = () =>
  new Promise(resolve => setTimeout(() => resolve(2), 2000));
const requestData3 = () =>
  new Promise(resolve => setTimeout(() => resolve(3), 1000));
//Promise all 처리
Promise all([requestData1(), requestData2(), requestData3()])
.then(console.log) // [1,2,3] 약 3초 소요됨