[자바스크립트 JavaScript] 어싱크, 어웨이트, 프로미스, 페치 (async , await , promise , fetch) 비동기 함수

async / await

 

await

• 비동기 작업이 완료될 때까지 코드의 실행을 일시 중지하며, 해당 작업이 완료되면 그 결과를 반환한다.
• await는 반드시 async 함수(비동기 함수) 내에서만 사용 가능하며, 비동기 작업을 수행하는 함수 내부에서만 사용 가능하다. (예: Promise를 반환하는 함수)  

 

async 

• 항상 Promise(함수의 성공 또는 실패를 반환하는 객체) 를 반환한다.
• 함수 안에서 return 키워드를 사용하여 값을 반환하면, 해당 값은 Promise.resolve()에 의해 감싸져서 Promise로 처리된다

 

Promise

• 비동기 작업의 완료 또는 실패를 나타내는 객체
• 비동기 작업이 시작되면 Promise 객체가 만들어지고, 작업이 완료되면 해당 Promise 객체는 함수의 성공 또는 실패를 나타내는 상태를 갖게 된다.
• resolve와 reject라는 두 개의 콜백 함수를 매개변수로 가진다.
• resolve: 비동기 작업이 성공적으로 완료되었을 때 호출되며, 작업의 결과 값을 가진다
• reject: 비동기 작업이 실패하거나 오류가 발생했을 때 호출된다.

 

async / await 사용 설명

async function fetchData() {

  // 비동기 데이터를 가져오기 위한 설정 옵션
  const options = {
    method: 'GET', // GET 요청 방식
    headers: {
      accept: 'application/json', // JSON 데이터 형식으로 응답 받음
      Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJjOTI3MDJhMzJkMmRjODkyZmY0MWVkNDUyY2FkNzlmNSIsInN1YiI6IjY1OWE2NjgwODc0MWM0MDE0OWNmZThhOSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.YP6AFRBzCxXt71iiMIveA22dxWAIxInrzwPri1QfSqg'
      // API에 접근하기 위한 키 값
    }
  };

  try {
    // fetch - API로부터 데이터를 가져오는데 사용되는 함수
    // fetch 함수로 api문서를 response 변수에 담음
    // await 함수는 문서를 다 받아올 때까지 기다린 뒤 실행하기 위해 사용됨
    const response = await fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options);

    // data 변수에 요청한 API가 담긴 response를 json방식을 통해 객체로 파싱하여 저장
    const data = await response.json();

    console.log(data); // 가져온 데이터를 콘솔에 출력
  } catch (error) {
    console.error(error); // 에러가 발생한 경우 콘솔에 에러 출력
  }
}

fetchData(); // async 함수 호출: fetchData 함수를 실행하여 데이터를 가져오기

 

 

---

fetch

• 주로 API데이터등 네트워크 리소스를 가져오는데 사용된다( HTTP 메서드(GET, POST, PUT 등)를 사용하여 서버에 데이터를 보내는 것도 활용가능)
• Promise를 반환하며 비동기적인 데이터 요청 및 응답을 다룰 수 있다.

 

fetch 사용 설명

// fetch 사용법

// 데이터를 받아올 URL, 받아올 데이터 방식(GET, POST)
// 응답 형태, API 키 등은 options에 담아서 요청한다
fetch(url, options)

  // response 객체를 이용해 요청한 데이터를 Promise의 .then() 메서드를 체이닝 하여 다음 단계를 실행할 콜백 함수를 등록한다
  // .then() 메서드 체이닝 - .then() 메서드를 연결하여 연속적으로 Promise 체인을 만든다는 것
  // Promise 체인 - 여러개의 비동기 작업을 순차적으로 실행하기 위해 사용되는 구조
  .then(response => {

    // response.ok는 요청한 문서를 받아올 경우 true를 반환하고, 그렇지 않은 경우 false를 반환한다
    if (response.ok) {

      return response.json();
      // API를 받아온경우, response객체를 json방식으로 파싱하여 Promise를 반환한다
      // Promise 반환 - .then 객체를 이용하여 성공 또는 실패 반환

    } else {

      throw new Error('요청 실패');
      // throw - 에러를 강제로 발생시켜 프로그램을 중단시킨다 (요청값이 잘못된 경우)
      // new Error - 에러가 발생한 경우 생성되는 객체 미리 설정한 오류 메세지가 나온다
    }
  })
  // response.json();을 매개변수(data)로 받아와 API문서를 console로 실행 (Promise의 성공시 실행되는 객체)
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('실행 오류', error); // Promise의 실패시 실행
  });