[JS30] day 6 - Ajax type ahead

API를 사용해 데이터를 가져와 검색한 도시, 인구수를 가져오기

 

이하 구현하는데 필요한 개념정리

• fetch() request나 axios. jquery등의 라이브러리를 사용하지 않고, JS에서 api를 받아오기 위한 방법 REST API를 호출할 때 사용되는 브라우저 내장 함수임 첫 번째 인자로 URL, 두 번째 인자로 옵션 객체를 받고 Promise 타입의 객체를 반환함
  참고 문서 : https://www.daleseo.com/js-window-fetch/
• promise 비동기 처리를 위한 메서드 ES6에서 도입되었음 resolve와 reject 2개의 함수형 파라미터를 가짐 resolve ⇒ 미래 시점에 얻게 될 결과를, reject ⇒ 미래 시점에 발생할 예외를 넘겨줌

const promise = new Promise(function(resolve, reject) {...});

// 예시 나눗셈 함수
function devide(numA, numB) {
  return new Promise((resolve, reject) => {
    if (numB === 0) reject(new Error("Unable to devide by 0."));
    else resolve(numA / numB);
  });
}
//////////////////////////////////////////////////////////////////////////
// 정상적인 인자로 devide 함수를 호출해서 promise 객체를 얻었을 때
devide(8, 2)
  .then((result) => console.log("성공:", result))
  .catch((error) => console.log("실패:", error));

// result = 성공: 4

//////////////////////////////////////////////////////////////////////////
// 비정상적인 인자로 devide 함수를 호출 했을 때
devide(8, 0)
  .then((result) => console.log("성공:", result))
  .catch((error) => console.log("실패:", error));

// result 실패: Error: Unable to devide by 0.
//    at Promise (<anonymous>:4:20)
//    at new Promise (<anonymous>)
//    at devide (<anonymous>:2:12)
//    at <anonymous>:1:1

참고 문서 : https://www.daleseo.com/js-async-promise/

• 비동기 처리 특정 로직의 실행이 끝날 때 까지 기다려주지 않고 나머지 코드를 먼저 실행 하는 것 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지 모르는데 요청에 대한 모든 처리가 완료될 때 까지 기다릴 수 없기 때문
  참고 문서 : https://velog.io/@zayong/비동기처리