비동기 처리( Asynchronous )

uoM·2021년 3월 15일
2

JS 비동기 처리

Javascript 런타임 환경에서는 비동기처리를 웹 API(클라이언트), libuv(NodeJS)를 통해 하게 된다.
비동기 처리는 순차적으로 처리되는 코드라인과 정반대 되는 동작 방식으로,
어떠한 처리결과를 기다리지 않고 다음 처리를 계속해서 이어가는 것이다.

때문에, 서버와의 통신결과를 비동기로 처리하게 된다.
웹 서비스를 이용하면서 서버와 통신 중일 때, 아무버튼도 동작하지 않는 서비스가 되면
바로 이탈하는 사용자가 많아질 테니까...

Promise

프로미스(Promise)란 JS에서 비동기처리를 위해 만들어진 객체이다.

const hello = () => {
  return new Promise((resolve,rejcet) => {
  	resolve('hello')
  })
};

hello().then(console.log) // 'hello'

프로미스 자체는 콜백내부에 resolve, reject의 호출 여부에 따라 then이나 catch를 통해 조작을 할수 있게 된다.

비동기처리를 할 때에는,

어떠한 처리의 결과가 내가 원하는 결과다 => resolve()
어떠한 처리의 과정중 문제가 있었다. => reject()

위와같은 동작 방식이다.
코드로 나타내면,

function doSomeThing () => {
  return new Promise((resolve, reject) => {
    if (problem) { // 문제가 있다면
      reject('Happen problem') // 문제를 내보낸다.
    }
    resolve('Doing success') // 성공을 내보낸다.
  })
}

Promise는 세가지의 상태를 가지고 있으며,
pending(처리중), fullFill(성공), rejcet(실패)로 나타낼 수 있다.

각각의 상태는 모두 Promise객체로 전달되며, then이나 catch 메소드를 통해 그 결과를 받아올 수 있다.

then()

then은 resolve된 데이터를 콜백에 전달하는 기능을 하게 된다.

doSomeThing()
  .then(prop => {
     console.log(prop) // 'Doing success'
  })

then이 없는 경우에는 resolve된(완료된) promise객체를 반환하게 된다.

catch()

catch는 reject된 데이터를 콜백에 전달하는 기능을 하게 된다.

doSomeThing()
  .catch(prop => {
     console.log(prop) // 'Happen problem'
  })

위 처럼 문제 상황이 발생한다면, problem = true
catch를 통해서 prop을 전달 받게 된다.

promise.all()

Promise.all은 인자로 받은 모든 프로미스 객체에 대해 그 결과가 정해져야지만 결과를 반환한다.
만약 중간에 실패하게 되면 실패한 내용만을 반환한다.

Promise
  .all([asyncFucntion1, asyncFunction2, asyncFunction3]) // 비동기 함수 세개의 결과를 배열에 담는다.
  .then([result1,result2,result3]) // 각 변수에 그 결과를 할당하여 반환한다.

result1,2,3는 각각 asyncFunction1,2,3의 결과를 담고 있으며, 실패하게 된다면 then에 새로운 결과를 담지 못한다.

promise.race()

Promise.race는 한 개라도 결과가 나오면 그 결과를 반환한다.
실패하면 실패한 promise객체를 반환, 성공하면 성공한 promise객체를 반환한다.

async & await

Promise가 비동기처리의 핵심이라고 하면,
비동기 처리를 더욱 편하게 하게 해주는 async / await이 있다.

async / await은 ES6에 도입된 문법으로, Promise객체를 조금 더 편하게 만들고 사용할 수 있도록 해준다.

async function doSomeThing(problem = false) {
  	if(problem) throw new Error('Happen problem')
	return 'Doing success'	
}

async를 통해 Promise객체를 생성한다면 이렇게 만들어 진다.
앞에 async 키워드를 붙여주면 해당 함수는 프로미스

객체로 생성되며,
return을 통해 resolve된 값을 받고
throw를 통해서 reject를 받게 된다.

async의 이점은 일반적인 함수 구성과 같게 코드가 변형되어 코드가 간결해지고, 가독성이 높아진다.
then없이도 비동기처리의 결과를 얻어서 처리할 수 있어 데이터의 움직임을 파악하기 쉽다.
try & catch를 통해 error핸들링을 하기 때문에 에러의 발생을 직관적으로 파악하기 좋다.

1개의 댓글

comment-user-thumbnail
2021년 3월 17일

엑기스만 잘 정리해주셨네요. 잘 보고 갑니당~

답글 달기