[자바스크립트 문제집] async / await

 

---

async / await

 

비동기 함수인 fetch를 이용하면, json 파일을 읽을 수 있다.

입력 칸에 색을 입력한 후 버튼을 클릭하면, 

해당 색에 해당하는 헥사 코드를 json 데이터에서 찾아 화면에 나타내는 코드를 async/await로 작성

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

async function getHexaCode(e) {
  // 새로고침 방지
  e.preventDefault();
  const userInputColor = inputElem.value;

  // await를 반드시 fetch(), json() 앞에 붙여야 함
  const result = await fetch('data.json');
  const datas = await result.json();

  // 배열의 요소 중, color 가, 사용자가 입력한 색과 일치하는 요소를 찾음.
  const findData = datas.find(data => data.color === userInputColor);

  // 찾은 요소는 객체인데, 그 value값이 헥사코드임.
  hexaCodeElem.innerHTML = findData.value;
  
  // 참고로, 아래 코드를 추가하면 색상도 반영됨 (채점과는 무관합니다).
  hexaCodeElem.style.color = findData.value;
}

buttonElem.addEventListener('click', getHexaCode);

 

 

 

---

Fetch API 사용하기

fetch() 이용하며 헤더를 반드시 명시한다.

body에 JSON.stringify()를 사용해서 유저 정보(“첫번째 참가자”)라는 name을 서버에 업데이트

fetch('https://reqres.in/api/users', {
  method: 'POST',
  headers: { 'Content-type': 'application/json' },
  body: JSON.stringify({
    name: '첫번째 참가자',
  }),
})

 

response.ok 는 HTTP Status code가 200-299 사이면 true, 그외는 false

만약 res.ok일 경우 “Success!” 라는 메시지와 함께 res.json()을 반환하고,

ok가 아닐 경우, “failed”라는 메시지를 콘솔에 띄운다.

//fetch()의 인자로 'https://reqres.in/api/users' 라는 가짜 사용자 정보 API url을 패스.
fetch('https://reqres.in/api/users', {
  method: 'POST',
  //3. 헤더를 반드시 명시합니다.
  headers: { 'Content-type': 'application/json' },
  //4.body에 `JSON.stringify()`를 사용해서 유저 정보(Object)를 서버에 업데이트.
  body: JSON.stringify({
    name: '첫번째 참가자',
  }),
})
  .then(res => {
    // response.ok는 HTTP Status code가 200-299 사이면 true, 그외는 False.
    // 만약 res.ok일 경우 "Success!" 라는 메시지와 함께 `res.json()`을 반환하고,
    if (res.ok) {
      console.log('success!');
      return res.json();
    }
    // ok가 아닐 경우, "failed"라는 메시지를 콘솔에 띄운다.
    else {
      console.log('failed');
    }
  })
  .then(data => console.log(data))
  .catch(error => console.log('Error'));

 

 

 

---

await 이미지 띄우기

1. 구글에서 이미지 주소를 가져와 fetch인자로 불러온다.

import 'babel-polyfill';

async function fetchImage() {
  // fetch() 메서드를 호출하여 구글에 검색된 이미지를 가져오고 변수(response)에 저장. 
  // 이때 await을 사용
  
  let response = await fetch(
    'https://pbs.twimg.com/profile_images/799445590614495232/ii6eBROd_400x400.jpg'
  );

  const error = false;

  if (!response.ok || error) {
    throw new Error(`HTTP error! status: ${response.status}`);
  } else {
    document.write("here's the image");
    return await response.blob();
  }
}

2. then()블록을 사용하여 promise가 성공적인 실행에 응답하며 catch()로 에러가 발생했을때 대처하는 코드를 작성

// then() 블록을 사용하여 promise가 성공적인 실행에 응답하고 에러가 발생했을때 catch를 하는 코드를 작성하세요.

fetchImage()
  //then()의 인자로 blob을 받는다.
  .then(blob => {
    //실행코드
    // 이미지를 변환해서 <img>의 src를 객체 URL로 설정하여 이미지에 html에 표시되도록 한다.

    // Blob 객체를 가리키는 객체 URL을 생성
    let objectURL = URL.createObjectURL(blob);

    // blob(이미지)을 표시할 <img> 요소를 만든다.
    let image = document.createElement('img');

    // <img>의 src를 객체 URL로 설정하여 이미지에 표시되도록 한다.
    image.src = objectURL;

    // ADOM에 <img> 요소 추가
    document.body.appendChild(image);
  })
  .catch(error => console.log(error));