• 회원가입
  • 로그인

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



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

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

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

 

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 이용해 간결히 표현하기


 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012