비동기 처리 방법

비동기 란 ?

요청과 결과가 동시에 일어나지 않는것을 말한다. 즉 동기와 달리 어떤 객체 또는 함수 내부에서 다른 함수를 호출했을 때 이 함수의 결과를 호출한 쪽에서 처리하지 않으면 비동기이다.

비동기 처리 란 ?

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행 시키는 특성을 말한다. 

즉 비동기적으로 일어나는 일들을 동기적으로 작동시키는 일이다. 

 

동기식 처리

function func1() {
  console.log('실행1');
}

function func2() {
  console.log('실행2');
  func3();
}

function func3() {
  console.log('실행3');
}

func1();
func2();

비동기식 처리

function func1() {
  console.log('실행1');
}

function func2() {
  setTimeout(function() {
    console.log('실행2');
  }, 0);

  func3();
}

function func3() {
  console.log('실행3');
}

func1();
fucn2();

 

비동기식 처리 방법

Callback

 

callback 함수는 다음과 같이 정의할 수 있다. 

1. 다른 함수의 인자로써 이용되는 함수.     

2. 어떤 이벤트에 의해 호출되어지는 함수.

 

function add(a, b, callback){
  var result = a + b;
  callback(result);
}

add(10, 10, function(result){
	console.log(result);
});

 

Callback 함수가 그 결과 값을 가지고 Callback을 다시 호출하고, 그 결과 값으로 또 다시 Callback을 호출하는 것 처럼 내용이 복잡해 진다면 Callback의 중첩이 늘어나게 되고 Callbackhell로 빠져버리게 된다. 

Callbackhell에 빠지게 되면 코드 가독성도 떨어지고 유지보수도 어려워지게 된다. 

 

이 Callbackhell을 해결하기위한 방법중 하나가 Promise이다.

 

 

Promise

비동기를 순차적으로 처리할 경우 중첩시켜 사용해야 했고 그러므로 에러, 예외처리가 어렵다는 것과 중첩으로 인한 복잡도가 증가했다.

이 두 가지의 단점을 해결하기위해 프로미스가 예전부터 라이브러리로 생겨났고, 이것을 ES6에서는 언어적 차원에서 지원하게 되었다.

Promise는 성공과 실패의 상태를 가지는 객체를 분리해서 가지며 성공은 resolve를 호출 실패는 reject를 호출 한다.

 

기본적인 예시

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
    	resolve();
    }, 3000);
});

promise
    .then(() => console.log('완료'))
    .catch(() => console.log('에러!!!'))

장점 

• 분기
• 가독성
• return 처럼 코드를 쓸 수 있다.
• 오류발생 줄여준다.
• 에러 처리가 용이하다.
• 수정이 쉽다.
• 성공했을때와 실패 했을때 일어나는 함수들을 우리가 직접 넘겨줄 수 있다.

 

3가지 속성 

 

1.Panding

서버에서 데이터를 가지고 온 상태 

new Promise();

 

2.fullfilled

비동기 동작 정상 완료

new Promise(function (resolve, reject) {
  resolve();
});

 

3.reject

비동기 동작중 에러 발생

new Promise(function (resolve, reject) {
  reject();
});

 

catch를 이용하는 방법

프로미스 객체
.then(가지고온 데이터를 처리)
.catch(에러가 뜨는경우)

에러를 처리할땐 catch를 이용하는것이 효율적이다.

 

유의 사항

• Promise 객체하나당 하나의 then만 열결할 수 있다. 
• then은 resolve 함수가 실핸된 시점에서 다시 promise를 부른다.
• 바로 앞의 resolve를 then 이 받는다.

 

async/await

async/await은 callback,promise 의 단점을 보완하고 더 읽기 쉬운 코드를 작성 할수 있도록 도와준다.

사용법은 매우 간단하다. function 앞에 async를 붙여주고 비동기 처리 부분에 await을 붙여주면 된다. 

async function goWork(time1, timeStartWork) {
  const time2 = await wakeUp(time1)
  const time3 = await takeSubway(time2)
  const time4 = await takeOffSubway(time3)
}

유의사항

await 뒷부분은 반드시 Promise를 반환해야 하고 async function 자체도 primise를 반환한다. 

 

async & await 예외 처리

예외를 처리하는 방법은 try catch 로  async에서 catch {} 를 사용하면 된다.

async function goWork(time1, timeStartWork) {
  try{
    const time2 = await wakeUp(time1)
    const time3 = await takeSubway(time2)
    const time4 = await takeOffSubway(time3)
  } catch(e) {
    console.log(error)
  }
}

 

참조 블로그 : https://joshua1988.github.io/web-development/javascript/js-async-await/#async--await-%EA%B8%B0%EB%B3%B8-%EB%AC%B8%EB%B2%95