[miniProjects] 10_Dad Jokes

10_Dad Jokes

💻 주제 : Fetch API를 통해 버튼을 누르면 무작위로 아재개그가 나옴.

• async & await 비동기처리

async function generateJoke() {
  const config = {
    headers: {
      'Accept': 'application/json'
    },
  }

  const res = await fetch('https://icanhazdadjoke.com', config);
  const data = await res.json();
  jokeEl.innerHTML = data.joke;
}

✔️ other ver.

function generateJoke() {
  const config = {
    headers: {
      'Accept': 'application/json'
    },
  }


  fetch('https://icanhazdadjoke.com', config)
    .then(res => res.json())
    .then((data) => {
      jokeEl.innerHTML = data.joke;
    });
}

❗비동기 처리

• 비동기 처리는 JavaScript에서 장기 실행 작업이나 네트워크 요청과 같은 작업을 처리할 때 사용된다. 비동기 처리를 통해 장기 실행 작업이 진행되는 동안 다른 작업을 수행할 수 있으며, 작업이 완료되면 그 결과를 처리할 수 있다.

😶async 키워드는 함수 정의 앞에 사용되며, 해당 함수가 비동기 함수임을 나타낸다.

😶await 키워드는 async 함수 내부에서 사용되며, 비동기 작업이 완료될 때까지 기다리는 역할을 한다.

• async 함수는 항상 Promise를 반환한다. await 키워드는 Promise를 대기하고, 그 결과를 반환한다. 이렇게 함으로써 비동기 작업의 결과를 동기적인 방식으로 처리할 수 있다.

[예제 코드]

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data'); // 비동기 작업
    const data = await response.json(); // 비동기 작업
    console.log(data);
  } catch (error) {
    console.log('Error:', error);
  }
}

fetchData();

• fetchData 함수는 async 함수.
• await 키워드를 사용하여 fetch 함수를 호출하고, 해당 비동기 작업이 완료될 때까지 기다린다. 그 후, await 키워드를 사용하여 response.json()을 호출하고, 다시 비동기 작업이 완료될 때까지 기다린다. 그 결과를 data 변수에 할당하고 출력한다.
• async 함수 내부에서 발생하는 오류는 try...catch 문으로 처리할 수 있다. 이를 통해 비동기 작업 중 발생하는 예외를 캐치하고 오류 처리를 할 수 있다.
• await 키워드는 Promise 객체 외에도 async 함수 내부에서 awaitable한 값(예: 다른 async 함수, Promise가 아닌 값 등)을 사용할 수 있다. 이 경우, await는 값을 반환하며, 해당 값은 비동기 작업의 완료 여부와 관계없이 사용된다.
  👍🏻 async와 await를 사용하면 비동기 작업을 보다 직관적이고 동기적인 코드와 유사한 구문으로 작성할 수 있다. 이를 통해 비동기 코드의 가독성과 유지보수성을 향상시킬 수 있다.