23.04.27 자바스크립트 JSON데이터를 프로미스 객체로 반환하는 fetch( ), async함수

서버에 있는 JSON파일을 가져올때 사용하는 객체 이름은?
XMLHttpRequest() => fetch()
최근에는 fetch()를 많이 사용 -> promise객체를 반환할 수 있기 때문!

//fetch()를 활용하여 데이터 출력해보기
fetch("student.json") //JSON파일을 Promise()객채로 가져옴
  .then(response => response.json()) //JSON파일 -> 객체파일 변환
  .then(json => {
    let output = "";
    json.forEach(student => {
      output += `
        <h2>${student.name}</h2>
        <ul>
          <li>전공 : ${student.major}</li>
          <li>학년 : ${student.grade}</li>
        </ul>
      `
    });
    document.querySelector("#result").innerHTML = output;
  })
.catch(error => console.log(error))

---

fetch() -> .then을무분별하게 쓰는 문제, 소스복잡 문제 를 해결하기위해 나온것이
: async 함수 / await 예약어 는 pomise 객체 혹은 callback 함수 사용시, 함수 안에 있는 실행문을 *비동기적으로 실행하기 위해 태어났다.
: async 함수 -> promise반환할수있다

 

*순수 Promise 객체르 활용한 then( ) 메서드 체이닝 기법.

function whatsYourFavorit() {
  let fav = "javascript";
  return new Promise((resolve, reject) => resolve(fav));
}

function displaySubject(subject) {
  return new Promise((resolve, reject) => resolve(`hello, ${subject}`));
}

whatsYourFavorit().then(displaySubject).then(console.log);

 

* async 키워드 사용

**async 키워드를 쓴 함수는 promise 객체를 반환하기 때문에 return 값에 또 promise 를 쓰지 않아도 된다.

async function whatsYourFavorite() {
  let fav = "javascript";
  return fav;
}

async function displaySubject(subject) {
  return `Hello, ${subject}`;
}

whatsYourFavorit().then(displaySubject).then(console.log);

*async 키워드를 사용하면 코드를 간략하게 작성 가능. 

-> 첫번째 함수가 완료된 후에, 두번째 함수가 작동해야한다. 아무리 비동기여도, 순서를 정의 시켜줘야할때 -> await 가 필요하다.

 

따라서 아래와 같이 작성한다.

await 는 비동기처리 방식에서도 우선순위를 결정한다.

 

async function whatsYourFavorite() {
  let fav = "javascript";
  return fav;
}

async function displaySubject(subject) {
  return `Hello, ${subject}`;
}

//whatsYourFavorit().then(displaySubject).then(console.log);

async function init() {
  const response = await whatsYourFavorite();
  const result = await displaySubject(response);
  console.log(result)
};
init();

// whatsYourFavorite() 함수 실행이 끝날때까지 기다린 후에 response값을 저장
// response값을 사용해서 displaySubject()함수를 실행하고 결과값을 result에 저장