사소한 개발지식/JavaScript

JAVASCRIPT - async/await 문법

2019. 6. 24. 16:10
728x90
반응형

앞서 다루었던 Promise 문법이 콜백 헬을 해결하였지만, 여전히 코드가 장황합니다.

 

Node 7.6버전(javascript ES2017)부터 지원되는async/await 문법은 Promise 코드를 한번 더 깔끔하게 줄여줍니다.

 

 

■ async/await문법 사용법

 

 - 기존 Promise문법

<script>
function findAndSaveUser(Users) {
    Users.findOne({})
        .then((user) => {
            user.name = 'zero';
            return user.save();
        })
        .then((user) => {
            return Users.findOne({ gender : 'm' });
        })
        .then((user) => {
            // 생략
        })
        .catch((err) => {
            console.error(err);
        });
}
</script>

 

 - async/await 변환

<script>
async function findAndSaveUser(Users) {
    try {
        let user = await Users.findOne({});
        user.name = 'zero';
        user = await user.save();
        user = await Users.findOne({ gender: 'm' });
        // 생략
    } catch (error) {
        console.error(error);
    }
}
</script>

 함수 선언부를 일반 함수 대신 async function으로 교체한 후, 프로미스 앞에 await을 붙여주었습니다.

 해당 함수는 await이 붙은 프로미스가 resolve될 때까지 대기한 후 다음 로직으로 넘어가게 됩니다.

 

 - async/await 화살표 함수 변환

<script>
const findAndSaveUser = async (Users) => {
    try {
        let user = await Users.findOne({});
        user.name = 'zero';
        user = await user.save();
        user = await Users.findOne({ gender: 'm' });
        // 생략
    } catch (error) {
        console.error(error);
    }
};
</script>

 

 

앞서 배운 Promise문법과 async/await문법을 사용하여 중첩되는 콜백 함수를 간략하게 변환하였습니다.

 

많은 NodeJS 코드가 Promise와 async/await으로 되어있기 때문에 변환 연습을 통해 익숙해지는 것이 중요합니다.

 

 

참고 : 길벗출판사 - Node.js 교과서(조현영 지음)

 

728x90
반응형
저작자표시 (새창열림)
'사소한 개발지식/JavaScript' 카테고리의 다른 글
  • JAVASCRIPT - 얕은복사 / 깊은복사
  • JAVASCRIPT - 배열 관련 메소드(Array Method)
  • JAVASCRIPT - Promise문법
  • Jquery attr()를 이용한 속성값 제어
KimBY
KimBY
웹개발과 관련된 개발지식 모음
B.Y Kim의 개발노트웹개발과 관련된 개발지식 모음
KimBY
B.Y Kim의 개발노트
KimBY
전체
오늘
어제
  • 분류 전체보기 (99)
    • 사소한 개발지식 (49)
      • PHP (2)
      • JavaScript (15)
      • NodeJS (0)
      • JAVA (2)
      • 잡?지식 (4)
      • 로드맵(FE) (22)
      • React (4)
    • 개발노트 (6)
      • 포트폴리오사이트 (6)
    • 프로그래머스 (33)
      • Level1(JS) (0)
      • Level2(JS) (33)
    • 백준알고리즘 (11)
      • 단계별로 풀어보기3(for문) (11)
    • 잡담 (0)

인기 글

최근 글

최근 댓글

태그

  • 단계별로풀어보기
  • javascript
  • Level2
  • 백준알고리즘
  • frontend
  • FE로드맵
  • 프로그래머스
  • CSS
  • react
  • 로드맵
hELLO · Designed By 정상우.
KimBY
JAVASCRIPT - async/await 문법
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.