JavaScript Promise와 aync/await의 차이점 <Promise / Promise.all / async await 자세히 분석하기>

Promise

: 자바스크립트에서 비동기 처리에 사용되는 객체

: 내용은 실행 되었으나 결과를 아직 반환하지 않은 객체

 

- Promise의 상태

ㆍPending : 대기 (처리 대기 중인 상태)

ㆍFulfilled : 이행 (처리 완료 상태)

ㆍRejected : 실패 (오류 발생 및 처리 실패 상태)

 

 

 

 

Promise.resolve() / Promise.reject()

: 결과 값은 condition이 true일 때 resolved / false 일 때 rejected

: Promise 객체에 대해 then을 통해 성공의 결과 값을 받을 수 있고

  catch를 통해 실패의 결과 값을 받을 수 있음

 

- 예제 코드

const condition = true;

const promiseObj = 
new Promise((resolve, reject) => {
  if (condition) {
    resolve("resolved");
  } else {
    reject("rejected");
  }
});

promiseObj
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.error(error);
  });

 

 

 

 

 

 

Promise의 함수화

: 함수 안에서 Promise 객체를 정의 하고 return으로 반환하면 Promise를 함수로 사용 가능

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function getPow(int, powInt) {
  return Math.pow(int, powInt);
}

function main() {
  function promiseFunc() {
    return new Promise((resolve, reject) => {
      const array = [1, 15, 26, 31, 7, 5, 21];
      const index = getRandomInt(array.length);
      const randomInt = array[index];

      if (randomInt > 10) {
        console.log("int > 10");
        resolve(randomInt);
      } else {
        console.log("int < 10");
        reject(randomInt);
      }
    });
  }

  promiseFunc()
    .then((res) => {
      console.log(`res = ${res}`);
      const result = getPow(res, 2);
      console.log(`제곱 결과 = ${result}`);
    })
    .catch((error) => {
      console.log(`10 아래 입니다 = ${error}`);
    });
}

main();

 

 

 

 

 

 

Promise의 함정

: 아래와 같이 Promise 객체 내에서 Promise 함수를 호출하면 호출하는 Promise의 결과를 기다려주지 않기 때문에

  제대로된 결과를 알 수 없다

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function getPow(int, powInt) {
  return new Promise(() => {
    Math.pow(int, powInt);
  })
}

function main() {
  function promiseFunc() {
    return new Promise((resolve, reject) => {
      const array = [1, 15, 26, 31, 7, 5, 21];
      const index = getRandomInt(array.length);
      const randomInt = array[index];

      if (randomInt > 10) {
        console.log("int > 10");
        resolve(randomInt);
      } else {
        console.log("int < 10");
        reject(randomInt);
      }
    });
  }

  promiseFunc()
    .then((res) => {
      console.log(`res = ${res}`);
      const result = getPow(res, 2);
      console.log(`제곱 결과 = ${result}`);
    })
    .catch((error) => {
      console.log(`10 아래 입니다 = ${error}`);
    });
}

main();


// 결과 
// int > 10
// res = 31
// 제곱 결과 = [object Promise]

 

 

 

 

 

 

Promise.all

: 여러 개의 프로미스를 동시에 실행시키고 모든 프로미스가 준비 될 때까지 대기하기 위한 문법

: 요청한 프로미스 중 하나라도 거부될 경우 에러가 반환 됨

: Promise.all을 사용하면 Promise 내에서 network 요청과 같이 지연이 발생할 수 도 있는 작업도 결과가 도착할 때까지 

  대기하여 결과를 반환 할 수 있음

// npm install node-fetch
// package.json에 맨 아래 "type": "module" 추가
import fetch from "node-fetch";
globalThis.fetch = fetch

let urls = [
    'https://api.github.com/users/iliakan',
    'https://api.github.com/users/remy',
    'https://api.github.com/users/jeresig'
  ];
  
  // fetch를 사용해 url을 프라미스로 매핑합니다.
  let requests = urls.map(url => fetch(url));
  
  // Promise.all은 모든 작업이 이행될 때까지 기다립니다.
  Promise.all(requests)
    .then(responses => responses.forEach(
      response => console.log(`${response.url}: ${response.status}`)
    ));

 

 

 

 

 

 

Promise.all 함수 호출 예제

: Promise.all은 Promise 객체를 배열 형태로 호출하여 모든 프로미스의 결과가 나올 때 까지 대기한다

function getRandomInt(max) {
  return new Promise((resolve) => {
    const returnNum = Math.floor(Math.random() * max);
    console.log(`random return Number = ${returnNum}`);
    resolve(returnNum);
  });
}

function getPow(int, powInt) {
  return new Promise((resolve) => {
    const returnNum = Math.pow(int, powInt);
    console.log(`pow return Number = ${returnNum}`);
    resolve(returnNum);
  });
}

function main() {
  const array = [1, 15, 26, 31, 7, 5, 21];

  Promise.all([getRandomInt(array.length), getPow(2, 3)]).then((res) => {
    console.log(`res1 = ${res}`);
  });
}

main();

// 결과
// random return Number = 3
// pow return Number = 8
// res1 = 3,8

 

 

 

 

 

Promise.allSettled

: Promise 들의 값은 물론 상태까지 알 수 있음

function getRandomInt(max) {
    return new Promise((resolve) => {
      const returnNum = Math.floor(Math.random() * max);
      console.log(`random return Number = ${returnNum}`);
      resolve(returnNum);
    });
  }
  
  function getPow(int, powInt) {
    return new Promise((resolve) => {
      const returnNum = Math.pow(int, powInt);
      console.log(`pow return Number = ${returnNum}`);
      resolve(returnNum);
    });
  }
  
  function main() {
    const array = [1, 15, 26, 31, 7, 5, 21];
  
    Promise.allSettled([getRandomInt(array.length), getPow(2, 3)]).then((res) => {
      console.log(`res1 = ${JSON.stringify(res)}`);
    });
  }
  
  main();
  
 
// 결과
// random return Number = 1
// pow return Number = 8
// res1 = [{"status":"fulfilled","value":1},{"status":"fulfilled","value":8}]

 

 

 

 

 

 

async await

: 가장 최근에 나온 비동기 처리 문법으로 기존의 callback이나 Promise의 단점을 해소하고자 만들어짐

: 콜백 함수가 꼬리에 꼬리를 무는 then 지옥을 예방할 수 있음

: await를 통해 Promise 반환 값을 받아올 수 있음

async function getRandomInt(max) {
  const returnNum = Math.floor(Math.random() * max);
  console.log(`random return Number = ${returnNum}`);
  return returnNum;
}

async function getPow(int, powInt) {
  const returnNum = Math.pow(int, powInt);
  console.log(`pow return Number = ${returnNum}`);
  return returnNum;
}

async function promiseFunc() {
    const array = [1, 15, 26, 31, 7, 5, 21];
    const index = await getRandomInt(array.length);
    const randomInt = array[index];

    if (randomInt > 10) {
      console.log("int > 10");
      return randomInt;
    } else {
      console.log("int < 10");
      return randomInt;
    }
  }

async function main() {
  try {
    const res = await promiseFunc();
    console.log(`res = ${res}`);
    const result = await getPow(res, 2);
    console.log(`제곱 결과 = ${result}`);
  } catch (e) {
    console.log(`10 아래 입니다 = ${e}`);
  }
}

main();


// 결과
// random return Number = 4
// int < 10
// res = 7
// pow return Number = 49
// 제곱 결과 = 49

 

 

Promise와 async await의 차이

: Promise에는 . catch와 같은 에러를 핸들링 할 수 있는 기능을 지원하지만

  async await은 이를 지원하지 않아 try-catch 문으로 핸들링이 필요함

: async await는 비동기 코드가 동기 코드 처럼 읽히게 해줘 가독성을 높일 수 있음

 

 

 

 

 

Promise.all과 async await를 활용한 예제

// First promise returns an array
const getUsers = () => {
  return new Promise((resolve, reject) => {
    return setTimeout(
      () => resolve([{ id: "jon" }, { id: "andrey" }, { id: "tania" }]),
      600
    );
  });
};

// Second promise relies on the resulting array of first promise
const getIdFromUser = (user) => {
  return new Promise((resolve, reject) => {
    return setTimeout(() => resolve(user.id), 500);
  });
};

// Third promise relies on the result of the second promise
const capitalizeIds = (id) => {
  return new Promise((resolve, reject) => {
    return setTimeout(() => resolve(id.toUpperCase()), 200);
  });
};

const runAsyncFunctions = async () => {
  const users = await getUsers();

  Promise.all(
    users.map(async (user) => {
      const userId = await getIdFromUser(user);
      console.log(userId);

      const capitalizedId = await capitalizeIds(userId);
      console.log(capitalizedId);
    })
  );

  console.log(users);
};

runAsyncFunctions();


// 결과
// [ { id: 'jon' }, { id: 'andrey' }, { id: 'tania' } ]
// jon
// andrey
// tania
// JON
// ANDREY
// TANIA

 

 

 

※ 추가 상식

1. Promise는 명령 실행에 대한 약속 객체 이며, async를 선언한 함수는 Promise로 반환이 된다.

2. 동기식 프로그래밍은 전의 작업이 끝날때 까지 기다리는 순서 지향 프로그래밍

3. 비동기식 프로그래밍은 순서에 상관없이 모든 작업을 실행해놓는 프로그래밍

4. Promise.all이나 콜백 함수, then / catch와 같은 문법을 이용하여 Promise의 결과 값을 받아 올 수 있음

5. async await 문에서는 await문을 통해 async로 선언 된 Promise의 결과 값을 받아 올 수 있음

 

 

 

 

 

 

Refference

Promise와 async/await 차이점

Promise.all() - JavaScript | MDN

프라미스 API

Promise.all with Async/Await