(5)비동기_자바스크립트_복습, Promise_all문법, try,catch,finally적용

● 이론0_ 지난 시간에 API에서 employee를 빠르고 효율적으로 데이터 받기 코드 작성해보기 (힌트 : B잼민이의 벨튀 10명)

async function getEmployee(id)
{
  //fetch를 Parameter id에 따라 딱 그놈만 데이터 불러오기
  const strData = await fetch(`https://learn.codeit.kr/api/employees/${id}`);

  const jsonData = await strData.json();

  return jsonData;//Promise 객체로 반환
}

//APU Json 데이터는 인덱스 1부터임
for(let i = 1;i<11;i++)
{
  //async 메소드의 반환값은 Promise 이므로, await 해줘야 fulfilled의 데이터 가질 수 있음
  const employeeJsonData = await getEmployee(i);
}

● 이론1_ 여러 Promise 객체를 리퀘스트할 때, 사용하는 문법 => Promise.all()메소드

○ 기본 쓰이는 방법

- 순서1_ promise들을 담을 배열 선언

const promises = [];

- 순서2_ for이든 뭐든 여러 promise를 await X , push로 담는다.

for(let i = 1 ; i < 11; i++) promises.push(getEmployee(i));//await X

- 순서3_ Promise.all(Promise가 담긴 배열) 메소드로, 모든 원소가 pending상태인지, fulfiled, reject인지 확인 가능

const employees = await Promise.all(promises);

○ 원리

• 처음 들어온 원소들 즉, promise 객체들은 모두 pending 상태
• promise들이 모두 fulfilled상태일 경우, => 반환값 : fulfilled
• promise들이 중 하나라도, rejected 상태일 경우 => 반환값 : Rejected된 원소값

 

● 이론2_ Promise.all() + try,catch,finally 적용하기

async function getEmployee(id) {
  //fetch를 Parameter id에 따라 딱 그놈만 데이터 불러오기
  const strData = await fetch(`https://learn.codeit.kr/api/employees/${id}`);

  const jsonData = await strData.json();

  return jsonData;//Promise 객체로 반환
}

const promises = [];

for (let i = 1; i < 11; i++) promises.push(getEmployee(i));

let employees;

try {

  employees = await Promise.all(promises);
  console.log(employees);
}
catch (error) {
  console.log('ERROR!!');
}
finally {
  console.log('FINISHED!!');
}

◎ 연습문제 :

실습 설명

https://learn.codeit.kr/api/employees와 https://learn.codeit.kr/api/menus에 동시에 리퀘스트를 보내고 직원 데이터는 employees 변수에, 메뉴 데이터는 menus 변수에 저장해 주세요.

실습 결과

직원 데이터:
[
  {
    id: 1,
    name: 'Jason',
    email: 'jason@codeitmall.kr',
    department: 'engineering'
  },
  {
    id: 2,
    name: 'Alice',
    email: 'alice@codeitmall.kr',
    department: 'engineering'
  },
  {
    id: 3,
    name: 'Brian',
    email: 'brian@codeitmall.kr',
    department: 'marketing'
  },
  {
    id: 4,
    name: 'Erica',
    email: 'erica@codeitmall.kr',
    department: 'marketing'
  },
  {
    id: 5,
    name: 'Wilson',
    email: 'wilson@codeitmall.kr',
    department: 'sales'
  },
  {
    id: 6,
    name: 'Olivia',
    email: 'olivia@codeitmall.kr',
    department: 'engineering'
  },
  {
    id: 7,
    name: 'Liam',
    email: 'liam@codeitmall.kr',
    department: 'marketing'
  },
  {
    id: 8,
    name: 'Ben',
    email: 'ben@codeitmall.kr',
    department: 'sales'
  },
  {
    id: 9,
    name: 'William',
    email: 'william@codeitmall.kr',
    department: 'sales'
  },
  {
    id: 10,
    name: 'Alex',
    email: 'alex@codeitmall.kr',
    department: 'sales'
  }
]
메뉴 데이터:
[
  { type: 'ko', name: '비빔밥' },
  { type: 'ko', name: '삼계탕' },
  { type: 'ko', name: '김치찌개' },
  { type: 'ko', name: '라볶이' },
  { type: 'ch', name: '짜장면' },
  { type: 'ch', name: '탕수육' },
  { type: 'ch', name: '짬뽕' },
  { type: 'jp', name: '라멘' },
  { type: 'jp', name: '스시' },
  { type: 'jp', name: '우동' }
]

○ function.js

export async function getEmployees() {
  try {
    const response = await fetch('https://learn.codeit.kr/api/employees');
    const employees = await response.json();
    return employees;
  } catch (error) {
    console.log('데이터를 가져오지 못했습니다 :(');
    return null;
  }
}

export async function getMenus() {
  try {
    const response = await fetch('https://learn.codeit.kr/api/menus');
    const menus = await response.json();
    return menus;
  } catch (error) {
    console.log('데이터를 가져오지 못했습니다 :(');
    return null;
  }
}

 

- 답 :

import { getEmployees, getMenus } from './asyncFunctions.js';

async function fetchData(id) {
  try {
    // getEmployees와 getMenus를 동시에 호출
    const [employees, menus] = await Promise.all([
      getEmployees(id),
      getMenus(id),
    ]);

    // 결과 출력
    if (employees) {
      console.log('직원 데이터:');
      console.log(employees);
    } else {
      console.log('직원 데이터를 가져오지 못했습니다.');
    }

    if (menus) {
      console.log('메뉴 데이터:');
      console.log(menus);
    } else {
      console.log('메뉴 데이터를 가져오지 못했습니다.');
    }

  } catch (error) {
    console.error('데이터를 처리하는 도중 문제가 발생했습니다:', error);
  }
}

// 원하는 ID로 데이터 가져오기
fetchData(1);

=> 알아야할 핵심 개념 :

• const [변수1, 변수2]  = await Promise.all([getEmploy(),getMenus() ]);

변수1, 변수2 : 각각의 API의 모든 Json 데이터를 한방에 promises 배열 객체로 얻을 수 있는 기법임...//신기함

• promises 배열 객체의 반환값 + if 조건문 응용 가능

- promises 반환값 : fulfiled => true

- promises 반환값 : rejected => false

 

- 핵심 답 :

import { getEmployees, getMenus } from './asyncFunctions.js';


const [employees,menus] = await Promise.all([
  getEmployees(), getMenus()
  ]);
  
if(employees)
{
  console.log('직원 데이터:');
  console.log(employees);
  
}

if(menus)
{
  console.log('메뉴 데이터:');
  console.log(menus);
}

// 원하는 ID로 데이터 가져오기