JavaScript _개념정리/비동기_ async/await, fetch API #3/3

1편과 2편에서 비동기 프로그래밍에 대해서 학습하였습니다!!! 이번에 학습한 비동기 프로그래밍은 프론트개발자라면 꼭 알아야할 필수 개념이기에 3편으로 나눠 정리를 하였습니다!!! 이번 블로깅은 비동기와 async/await에 대해 간단한 정리와 fetch에 대해 정리를 해보고자 합니다! Let's get it~!

 

---

# 비동기 처리

비동기란 코드의 연산이 끝날 때까지 코드 실행을 멈추지 않고 다음 코드를 먼저 실행하는 특성을 말합니다! 가장 흔한 사례는 어떠한 서버에서 데이터를 요청할 때 받아오기 까지 시간이 걸리지만 나머지 코드는 실행한 코드를 기다려 주지 않고 나머지 코드를 먼저 실행시켜줍니다. 이를 비동기 처리라고 합니다.

 

console.log("1");
setTimeout(() => {
  console.log("2");
}, 2000);
console.log("3");
 
// 1
// 3
// 2

 

위와 같은 예시로 설명하자면 1을 호출 하고 2를 호출해야 되는데 이것을 기다려 주지 않고 바로 3을 먼저 호출하게 됩니다. 이렇게 실행 순서가 확실하지 않는 것들을 비동기적 방식이라고 부릅니다.

 

---

# async / await

async와 await는 2편에서 설명했듯이 비동기 코드를 동기적인 코드로 작성할 수 있도록 만들어주는 문법이라고 했습니다! 다시한번 예시 코드를 통해 복습하는 시간을 가져 봅시다!!!

 

async

async는 function 앞에 위치하고 async를 붙인 해당 함수는 promise를 반환합니다! 위치 꼭 기억하기!!

 

async function joycoding() {
  return "async는 function 앞에있어염"
}
 
joycoding().then(alert); // "async는 function 앞에있어염"

async function joycoding() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("무얏호!"), 3000);
  });
  let sayMuyaho = await promise; // 프라미스가 이행될 때까지 기다려줍니다.
  alert(sayMuyaho); // "무얏호!"
}
 
joycoding();

 

에러 헨들링 /  try catch문

데이터를 받아올때 에러가 생기기도 합니다! 이때 async / await 와 함께 try catch문을 활용해서 에러 헨들링을 할수 있습니다.

 

async function joycoding() {
  try {
    let dataUrl = await fetch("http://유효하지-않은-주소");
  } catch (err) {
    alert(err); // TypeError: failed to fetch
  }
}
 
joycoding();

 

---

# fetch를 이용한 네트워크 요청

비동기 요청의 가장 대표적인 사례가 네트워크 요청이라 할 수 있습니다! 다양한 네트워크 요청중, url로 요청하는 경우가 가증 흔합니다. 이를 가능하게 해주는 API가 fetch API 입니다!

 

fetch API사용법

다음 아래 url 주소를 활용해서 콘솔창에서 실험을 해봅시다!!!

 

최신 뉴스 정보

https://v1.nocodeapi.com/codestates/google_sheets/YbFMAAgOPgIwEXUU?tabId=%EC%B5%9C%EC%8B%A0%EB%89%B4%EC%8A%A4

날씨 정보

https://v1.nocodeapi.com/codestates/google_sheets/YbFMAAgOPgIwEXUU?tabId=%EB%82%A0%EC%94%A8&row_id=2

 

let url = 'https://v1.nocodeapi.com/codestates/google_sheets/YbFMAAgOPgIwEXUU?tabId=최신뉴스';
fetch(url)
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(error => console.log(error));

 

fetch는 url을 주소를 받을 수 있고 비동기 된 또 하나의 프로미스라고 생각하면 편합니다! 그렇다면 이것을 실행 시키려면 후속메서드 then을 사용하면 되겠죠?! 이때 3번줄에 json()은 fetch에서 자체적으로 JSON 형태로 변환시켜주는 메서드 입니다! 꼭 콘솔창을 확인 하면서 진행하시길 바랍니다!!

 

 

fetch api , 데이터 요청하기 등 어떤 네트워크 요청에 대한 자세한 내용을 다루지는 않았지만 조만간 http와 Ajax, JSON에 대해서도 다룰 예정입니다!!! 중요한건 비동기 프로그래밍에 대한 이해니까 꼭 실습하기!!!

 

---

 

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Using Fetch - Web APIs | MDN