[JS] promise, fetch

노마드 JS 강의에서 weather API를 다루다가 등장한 fetch와 promise
리액트에서도 썼었는데 원리도 모르고 썼던 기억이

---

promise 객체

동기처럼 처리되는 것이 아니라 미래의 데이터 처리가 완료된 시점에 결과를 제공하겠다는 ‘약속(프로미스)’를 반환
당장 뭔가 일어나지 않고, 시간이 좀 걸린 뒤에 일어나는 것

promise 객체 사용 이유

• 비동기로 처리되는 작업의 결과를 사용하기 위해
• 객체의 콜백함수로 작업을 지정 => ‘순서 보장’
• 콜백함수가 너무 많아지면, 수정이 복잡 & 코드의 가독성 떨어짐
• then()을 이어붙여 콜백함수 작업을 처리 => 콜백지옥 방지

promise 특징

• Promise 작업의 결과는 resolve와 reject로 받을 수 있음
• Promise 작업이 성공시 resolve로 받음
• 살패시 reject로 받음

---

fetch

JavaScript 내장 API로 비동기 통신 네트워크를 가능하게 하는 기술
fetch 함수는 url로 요청을 보낸 결과로 Promise 객체를 반환

fetch는 promise 이기 때문에 서버 응답을 받아야 한다

fetch 특징

• Fetch로 반환되는 Promise 객체는 error를 reject 하지 않음
• 대신 ok 상태인 resolve 반환
• 즉, 별도로 에러처리를 해줘야함
• Fetch는 쿠키를 보내거나 받지 않음
• 쿠키를 전송하기 위해선 자격증명(credentials) 옵션 설정해줘야 함

---

async & await

fetch의 단점을 보완하기 위해 등장

• fetch는 비동기로 동작하기 때문에 결과 장담불가
• 콜백함수로 처리해야만 결과를 보장받을 수 있다는 단점 존재
• 이 단점을 보완하기 위해 등장한 것이 async와 await

그러니까!!!

1. async라고 비동기 함수를 선언해 비동기 작업에 await를 붙여주면
2. 그 뒤에 이 결과를 사용하는 작업에서 동기처럼 처리됨
3. 즉, 비동기 작업이 이루어진 후에 그 결과로 작업이 수행됨

---

여튼.. fetch를 사용한 weather 코드

const API_KEY = '123';

function onGeoOk(position) {
  const lon = position.coords.longitude;
  const lat = position.coords.latitude;
  const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      const weather = document.querySelector('#weather span:first-child');
      const city = document.querySelector('#weather span:last-child');
      weather.innerText = `${data.weather[0].main} / ${data.main.temp}`;
      city.innerText = data.name;
    });
}

function onGeoError() {
  alert("Can't find you. No weather for you");
}

console.log('Requesting geolocation...');

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

interesting!!

---

Ref. Promise, Fetch, Async, Await 에 대해 알아보자, 헬로코딩