Javascript 런타임 환경에서는 비동기처리를 웹 API(클라이언트), libuv(NodeJS)를 통해 하게 된다.
비동기 처리는 순차적으로 처리되는 코드라인과 정반대 되는 동작 방식으로,
어떠한 처리결과를 기다리지 않고 다음 처리를 계속해서 이어가는 것이다.
때문에, 서버와의 통신결과를 비동기로 처리하게 된다.
웹 서비스를 이용하면서 서버와 통신 중일 때, 아무버튼도 동작하지 않는 서비스가 되면
바로 이탈하는 사용자가 많아질 테니까...
프로미스(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
은 resolve된 데이터를 콜백에 전달하는 기능을 하게 된다.
doSomeThing()
.then(prop => {
console.log(prop) // 'Doing success'
})
then이 없는 경우에는 resolve된(완료된) promise객체를 반환하게 된다.
catch
는 reject된 데이터를 콜백에 전달하는 기능을 하게 된다.
doSomeThing()
.catch(prop => {
console.log(prop) // 'Happen problem'
})
위 처럼 문제 상황이 발생한다면, problem = true
catch
를 통해서 prop을 전달 받게 된다.
Promise.all
은 인자로 받은 모든 프로미스 객체에 대해 그 결과가 정해져야지만 결과를 반환한다.
만약 중간에 실패하게 되면 실패한 내용만을 반환한다.
Promise
.all([asyncFucntion1, asyncFunction2, asyncFunction3]) // 비동기 함수 세개의 결과를 배열에 담는다.
.then([result1,result2,result3]) // 각 변수에 그 결과를 할당하여 반환한다.
result1,2,3는 각각 asyncFunction1,2,3의 결과를 담고 있으며, 실패하게 된다면 then
에 새로운 결과를 담지 못한다.
Promise.race
는 한 개라도 결과가 나오면 그 결과를 반환한다.
실패하면 실패한 promise객체를 반환, 성공하면 성공한 promise객체를 반환한다.
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핸들링을 하기 때문에 에러의 발생을 직관적으로 파악하기 좋다.
엑기스만 잘 정리해주셨네요. 잘 보고 갑니당~