• 회원가입
  • 로그인
  • 구글아이디로 로그인

[JS-엘리] JS 13강 - 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs | (JavaScript ES6)

1,170  

동영상 수강 전 본문 내용 스캔.

동영상 수강 후 본문 내용 스캔.

안 보고 직접 코드 타이핑 하기.

 

async.js

 

// async & await

// clear style of using promise

// promise를 좀 더 간결・간편・동기적으로 실행되는 것같이 해주는 코드. syntactic sugar 일종.

// syntactic sugar : 기존 코드와 결합해 좀 더 간편한 api 제공. (예: class : prototype에 기반한 코드)


// 1. async


/*

function fetchUser() {

    // do network request in 10 seconds...

    return 'ellie';

}


const user = fetchUser(); // 호출

console.log(user); // ellie

*/


// Promise 상태 3가지: pedding, fulfilled, rejected


/*

function fetchUser() {

  return new Promise((resolve, reject) => {

    // do network request in 10 seconds...

    // return 'ellie'; // Promise {<pending>}

    resolve('ellie'); // Promise {<fulfilled>: "ellie"}

  });

}

*/


// async 키워드 사용 시, Promise 사용 코드를 더 간단히 표현 가능.

async function fetchUser() {

  // do network request in 10 seconds...

  return 'ellie';

}


const user = fetchUser(); // 호출

user.then(console.log); // ellie (코드 의미: user가 들어오면, 콘솔로그에 출력)

console.log(user); // Promise {<fulfilled>: "ellie"}


// 2. await


/***********************

 * 에러 처리 없는 경우

 ***********************/


function delay(ms) {

  return new Promise((resolve) => setTimeout(resolve, ms));

}


async function getApple() {

  await delay(2000);

  return '사과';

}


async function getBanana() {

  await delay(1000);

  return '바나나';

}


/*

// 위 getBanana() 함수를 아래처럼 chaining해서 표현 가능하나, 비권장.

function getBanana() {

    return delay(1000)

    .then(() => '바나나');

}

*/


/*

// apple과 banana를 둘 다 출력하기.

function pickFruits() {

  return getApple() // getApple() 호출해서

    .then((apple) => {

      // apple이 받아와지면

      return getBanana() // getBanana() 반환할건데

        .then((banana) => `${apple} + ${banana}`); // banana 받아와지면, apple과 banana 묶어줌.

    });

}


// 위 코드는 콜백지옥과 유사한 프라미스 지옥. ㅡㅡ;

// async・await 사용해 아래처럼 간단하게 표현 가능. 단, 순차 실행이라 시간이 오래 걸림.

// 저 아래에서 병렬적으로 더 빠르게 실행하는 코드 소개. 

*/


async function pickFruits() {

  const apple = await getApple(); // getApple() 다 받아오면 apple에 담기. (2초 소요.)

  const banana = await getBanana(); // getBanana() 다 받아오면 banana에 담기 (추가로, 1초 소요)

  return `${apple} + ${banana}`; // 다 받아온 apple과 banana를 묶어 반환.

}


// pickFruits().then(console.log);


/***********************

 * 에러 처리 있는 경우

 ***********************/

/*

function delay(ms) {

  return new Promise((resolve) => setTimeout(resolve, ms));

}


async function getApple() {

  await delay(2000);

  throw 'error';

  return '사과';

}


async function getBanana() {

  await delay(1000);

  return '바나나';

}


async function pickFruits() {

  try {

    const apple = await getApple(); // 2초 소요

    const banana = await getBanana(); // 추가로 1초 소요

  } catch (error) {

    return 'error';

  }

  return `${apple} + ${banana}`;

}


pickFruits().then(console.log);

*/


// 위 코드는 순차적 실행으로 인해 시간이 오래 소요.

// 서로 무관 시, 병렬 처리하면 실행 시간을 단축 가능.

// 4. await 병렬 처리


async function pickFruits() {

  const applePromise = getApple(); // 바로 실행되어 2초 후 실행.

  const bananaPromise = getBanana(); // 위 코드와 병렬적으로 실행.

  const apple = await applePromise;

  const banana = await bananaPromise;

  return `${apple} + ${banana}`;

}


pickFruits().then(console.log); // 사과 + 바나나


// 위 코드를 아래처럼 Promise.all API 이용해 더 간단히 표현 가능.

// 3. Useful APIs


// Promise.all

function pickAllFruits() {

  return Promise.all([getApple(), getBanana()]).then((fruits) =>

    fruits.join(' + ')

  );

}

pickAllFruits().then(console.log); // 사과 + 바나나


/*

// 위 함수를 아래처럼 표현도 가능. (동영상 강의엔 없는 내용)

async function pickAllFruits() {

  let fruits = await Promise.all([getApple(), getBanana()]);

  return fruits.join(' + ');

}

pickAllFruits().then(console.log); // 사과 + 바나나

*/


// Promise.race

function pickOnlyOne() {

  return Promise.race([getApple(), getBanana()]);

}

pickOnlyOne().then(console.log); // 바나나


/***************************************************

 * async, await : promise를 간단하게 표현 위한 도구.

 * all, race :  Promise 객체에 속하는 유용한 API

 **************************************************/


// Homework :

// callback-to-promise.js 파일의 콜백지옥 해결 promise 코드를 async, await 이용해 간결히 표현하기


 


분류 제목
JS-바위 JS 80~82강 - 자바스크립트 객체 클래스
JS-바위 JS 77~79강 - 자바스크립트 모듈 활용 (Javascript Module)
JS-바위 JS 73~76강 - 테이블 페이지네이션 (Table Pagination)
JS-바위 JS 72강 - AOS 라이브러리 - 슝슝 나타나는 스크롤 애니메이션
JS-바위 JS 69~71강 - 숫자 그래프 애니메이션 (Number Animation)
JS-바위 JS 68강 - animate.css 라이브러리 - 스크롤이벤트 적용
JS-바위 JS 64~67강 - tailwindcss (node js - CSS framework) - CSS 없이 스…
JS-바위 JS 61~63강 - 최신 JS 문법 (ECMA SCRIPT 6) - 변수선언 키워드 let, const, …
JS-바위 JS 60강 - 인스타그램 (instagram) API - 인스타그램 피드를 웹사이트에 출력
JS-바위 JS 56~59강 - 쿠키 (Cookie) 이용해 「오늘 하루 안보기 팝업창 띄우기」 생성
JS-바위 JS 52~55강 - 멀티플 슬라이드 (Multiple Slideshow)
JS-바위 JS 51강 - 스크롤트리거 (scrollTrigger) - 스크롤 애니메이션 구현
JS-바위 JS 46~50강 - 필터링 반응형 갤러리 (Fitered Gallery)
JS-바위 JS 45강 - 하이라이트 무빙 탭 애니메이션 (Highlight Moving Tab animation)
JS-바위 JS 42~44강 - 풀스크린 슬라이드 (FullScreen Slide) 1 - CSS로만 구현
JS-바위 JS 41강 - 드롭다운 서브메뉴 (Dropdown Submenu)
JS-바위 JS 40강 - 반응형 일정표 (Gantt chart : 간트 차트)
JS-바위 JS 39강 - 마우스허버 시 따라 움직이는 메뉴바 애니메이션 (MenuBar Animation) ※ 언더바…
JS-바위 JS 38강 - 숫자 바뀌는 애니메이션 (Number Animation) (순수JS버전)
JS-바위 JS 37강 - 아코디언 (Accodion) 메뉴 (순수JS버전)
1/35
목록
찾아주셔서 감사합니다. Since 2012