(2) 비동기처리 적용해보기

📌자바스크립트의 비동기

(1)SetTimeout
Web API의 한 종류인 setTimeout() 함수를 통해 비동기 처리를 적용해보자.

코드를 살펴보면 동기적으로 코드가 진행되면서 콘솔창에 보이는 1,2,3 이라는 결과를 얻게 된다. 
이제 중간의 2를 비동기적으로 처리하면 아래와 같다.

아까와 같이 순차적으로 1,2,3 이라는 결과가 나오지 않고 1,3,2라는 결과를 얻게 되었는데, 이는 바로 setTimeout()이라는 비동기 함수를 통해 2를 2초 뒤에 출력하게 하는 명령을 주어서 2가 출력될 때까지 3이 기다리지 않고 먼저 출력된 후에 2초가 지나서 2가 출력되었기 때문이다. 

(2)콜백함수
콜백함수란 다른 코드의 인수로 넘기는 실행이 가능한 함수를 말한다. 또는 어떠한 이벤트에 의해 호출되는 함수라고 할 수 있다. 일반적인 함수와 문법적으로 다르지 않고 단지 호출 방식이 나중에 호출되어 콜백함수로 불린다.

예를들어 ,

const plus = (a,b,callback) => {
// a,b,callback 인자로 받는다.
const sum = a+b;
callback(sum);
}; // callback함수를 사용함으로써 바로 값을 출력하지 않고 따로 호출 할때 출력해준다.

plus(4, 3, (result) => {
 // console.log로 결과를 찍는 함수로 콜백함수로 넘긴다.
 console.log(result); 
});

결과 : 7

그렇다면 콜백함수를 사용하는 이유는 뭘까

const plus = (a, b) => {
  const sum = a + b;
  return sum;
};

const print = (result) => {
  console.log(result);
};

print(plus(1, 2));

이렇게 print함수를 따로 써서 사용하게되면 plus함수가 완료되기 전까지는 print함수가 실행이 안되기 때문에 실행이 지연되어 코드의 효율성이 떨어지게 된다.

지금은 한 개인 콜백함수가 인자로 전달되는 숫자가 많아지면 들여쓰기가 그만큼 많아지는데 그런 코드방식을 콜백지옥이라고 한다.

(3)Promise 객체 

위에서 쓰인 콜백함수 방식보다 좀 더 쉽게 비동기 처리할 수 있게 나온 방법이 Promise 객체를 이용한 방법이다. 
Primise란 언젠가 사용하게 될 값을 생성해내는 객체이다. 

그렇다면 promise를 언제 사용하게 될까? 서버에 '데이터를 하나 보내주세요'라는 요청을 할 경우, 데이터를 받아오기도 전에 데이터를 다 받아온 것 처럼 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜬다. 이와 같은 문제를 막고자 비동기 동작을 동기적으로 받아 처리할 때 사용한다. 

function sayHello() {
	return new Promise((resolve,reject) => {
    	const hello = "hello hello";
        resolve(hello)
        //reject(new Error()); 에러 발생시
    })
}
sayHello()
	.then(resolveData => {
    	consol.log(resolveData)
        return resolveData
    })
    .then(resolveData => {
		console.log(resolveData)
        return resolveData
    })
    .then(resolveData => {
    console.log(resolveData)
    })
    .catch(error => {
    console.log(error)
    })

프로미스를 사용하면 비동기 처리 후 마치 동기 메서드처럼 값을 반환할 수 있다. 
sayHello라는 함수는 프로미스로 비동기적으로 작업이 실행된다.비동기적으로 처리된 결과 값을 resolve 넘겨주고 sayHello 호출문에서는 then이라는 메서드로 동기적으로 반환 받을 수 있다.

이런 Promise는 3가지의 상태를 갖는다.

• Fulfilled (해결된 값)
• Rejected (값을 얻지 못하게 된 이유)
• Pending (진행 중인 상태)
• Settled → 결괏값이 성공 혹은 실패일 때 (Fulfilled, Rejected 둘 중 하나의 상태일 때)

const promise = new Promise((resolve, reject) => {
	// ...
});

pending(대기)상태 : 비동기 처리 로직이 아직 완료되지 않은 상태
new Promise()생성자를 호출하면 대기 상태가 된다.

function sayHello() {
  return new Promise((resolve, reject) => {
    const data = 'hello'
    resolve(data);
  });
}

fullfilled (이행) 상태 : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태. 넘겨 받은 인자에서 resolve를 함수로 실행하면 이행 상태가 된다.

function sayHello() {
  return new Promise((resolve, reject) => {
    reject(new Error('fail!!!!'));
  });
}
sayHello()
  .then()
  .catch((error) => {
    console.log(error); // fail!!!!
  });

rejected (실패) 상태 : 비동기 처리가 실패하거나 오류가 발생한 상태. 넘겨 받은 인자에서 reject를 함수로 실행하면 실패 상태가 된다. 실패 상태가 되면 실패 처리의 결과값을 catch()메소드를 통해 받을 수 있다.