비동기 통신, Promise 활용

Promise

---

• 비동기 작업을 표현하는 자바스크립트 객체
• 비동기 작업의 상태값 성공, 실패, 진행 (resolve,reject,pending) 를 표현한다.
• 비동기 처리의 순서를 표현 할 수 있다.

(1) Promise 생성 문법

let myPromise1 = new Promise((resolve, reject) => {
  resolve('JS promise');
})

(2) Promise 이행(resolve)과 거부(reject)

myPromise1.then();
let myPromise2 = new Promise((resolve, reject) => {
  reject('reject')
})
myPromise2.then();

---

(3) 예제 문제

3-1 Promise 선언

📍 지시 사항
1. new Promise() 메소드를 호출해서 Promise 생성
2. getData() 함수에 new Promise()를 호출할 때 콜백 함수의 인자를 resolve, reject로 선언하세요. 이때, resolve를 실행해서 선언된 메시지를 resolve 인자 값으로 넘기세요.

function getData(){
	new Promise((resolve, reject) => {
      let data = `javascript promise`
      resolve(data)
    })
}

// then을 이용해서 resolve()의 결과 값 data를 resolvedData로 받습니다.
getData().then((resolvedData) => {
	document.write(resolvedData);
})

3-2 Promise 사용하는 함수 만들기 #1

📍 조건
 1. 함수명 : resolveWhenPositiveNumber
 2. 입력 : 숫자
 3. 출력 : 입력된 숫자가 양수면 resolve, 음수면 reject하는 Promise

function resolveWhenPositiveNumber(num){
  return new Promise((resolve, reject) => {
    if(Math.sign(n) === 1){
       resolve(`${n}은 양수입니다.`)
    }else if(Math.sign(n) === -1){
       reject(`${n}은 음수입니다.`)
    }
  });
}

🐝 참고 : Math.sign() 메서드는 음수 or 양수 판단이 가능
· 반환 값이 1일 경우 양수
· 반환 값이 1-일 경우 음수
· 반환 값이 0 / -0일 경우 0 / -0의 값을 그대로 반환

3-3 Promise 사용하는 함수 만들기 #2

📍 조건
 1. 함수명 : resolveWhenEvenNumber
 2. 입력 : 숫자
 3. 출력 : 입력된 숫자가 짝수면 resolve, 홀수면 reject하는 Promise

function resolveWhenEvenNumber(num) {
  return new Promise((resolve, reject) => {
    if (num % 2 === 0) {
      resolve(`${num}은 짝수입니다!`);
    } else {
      reject(`${num}은 홀수입니다...`);
    }
  });
}

3-4 fetch 사용하여 json 데이터 가져오기

📍 지시사항
 1. fetch를 통해 json 파일 불러오기
 2. 배열 데이터에서, 사용자가 입력한 색상을 가진 요소(객체)를 찾는다.
 3. 해당 요소의 헥사코드 값을 id가 "hexaCode"인 요소에 주입

function showHexaCode(e) { 
  // 새로고침 방지
  e.preventDefault()
  
  const userInputColor = inputElem.value 
  
  // fetch -> response.json() 하는 과정은 고정 (번거롭지만, 매번 해 주어야 함).
  // response 대신 res 등으로 변수명 변경 가능
  fetch('data.json')
    .then(response => response.json())
    .then(datas => {
      // 배열의 요소 중, color 가, 사용자가 입력한 색과 일치하는 요소를 찾음. 
      const foundData = datas.find(data => data.color === userInputColor)
      
      // 찾은 요소는 객체인데, 그 value값이 헥사코드임.
      hexaCodeElem.innerHTML = foundData.value
      
      hexaCodeElem.style.color = foundData.value
    })
  
}

const inputElem = document.querySelector('#inputColor')
const buttonElem = document.querySelector('#buttonSubmit')
const hexaCodeElem = document.querySelector('#hexaCode')

buttonElem.addEventListener("click", showHexaCode)

🐝 fetch 로 json 데이터 불러오기

fetch('json파일 이름')
	.then(res => res.json())
	.then(data => {
  		~~~
	})