프로그래밍 「 자바스크립트 편」Async/Await를 사용한 비동기 JavaScript 단순화

비동기 프로그래밍은 API에서 데이터를 가져오는 것과 같이 시간이 많이 걸리는 작업을 처리하기 위해 JavaScript에서 필수적입니다. 전통적으로 개발자는 콜백과 promise를 사용하여 비동기 코드를 관리했습니다. 그러나 ECMAScript 2017(ES8)에 async/await가 도입되면서 JavaScript는 비동기 작업 작업을 위한 보다 간결하고 직관적인 구문을 제공합니다. 이 기사에서는 async/await의 기능을 살펴보고 함수를 사용하여 무료 API에서 데이터를 가져오는 방법을 보여줍니다 . async/await의 세계로 뛰어들어 비동기 코드를 단순화해 보겠습니다!fetch

님이 촬영 한 사진 브래든 컬럼 on Unsplash

Async/Await 이해:

Async/await는 보다 동기적인 스타일로 비동기 코드를 작성할 수 있는 구문 기능으로, 더 쉽게 읽고 유지 관리할 수 있습니다. promise를 기반으로 하며 친숙한 try-catch 블록과 순차적 코드 흐름을 사용하여 promise를 처리하는 방법을 제공합니다.

무료 API에서 데이터 가져 오기 :

async/await의 실제 사용법을 보여주기 위해 함수를 사용하여 무료 API에서 데이터를 가져오겠습니다. 이 예에서는 Typicode API를 사용하여 게시물 목록을 검색합니다.fetch

코드 구현:

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error('Failed to fetch data');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error.message);
  }
}

fetchData();

코드 설명 :

1. 데이터 가져오기 작업을 수행하기 위해 호출되는 비동기 함수를 정의합니다.fetchData
2. 함수 내에서 키워드를 사용하여 요청이 완료될 때까지 기다렸다가 변수에 응답을 저장합니다.awaitfetchresponse
3. 그런 다음 속성을 사용하여 응답이 성공적인지 확인합니다(상태 코드 200). 그렇지 않으면 오류가 발생합니다.ok
4. 다음으로, 키워드를 다시 사용하여 응답 본문을 JSON으로 구문 분석하고, JSON은 데이터가 포함된 promise를 반환합니다.await
5. 구문 분석된 데이터는 변수에 저장됩니다.data
6. 가져오기 또는 구문 분석 프로세스 중에 오류가 발생하면 블록이 오류를 처리하고 오류 메시지를 기록합니다.catch

실제 사용 사례:

Async/await는 비동기 코드를 간소화하여 여러 API 호출, 데이터베이스 쿼리 또는 파일 작업과 관련된 복잡한 작업을 더 쉽게 처리할 수 있도록 합니다. 코드 가독성을 향상시키고 기존 콜백 기반 접근 방식에서 자주 발생하는 "콜백 지옥" 문제를 줄입니다. async/await를 사용하면 보다 표현력 있고 유지 관리하기 쉬운 코드를 작성할 수 있습니다.

요약:

이 기사에서는 비동기 코드를 단순화하기 위한 JavaScript의 async/await의 기능을 살펴보았습니다. 함수를 사용하여 무료 API에서 데이터를 가져오는 방법을 시연하고 단계별 구현을 설명했습니다. Async/await는 약속을 처리하는 우아하고 간결한 방법을 제공하여 비동기 프로그래밍을 보다 직관적이고 읽기 쉽게 만듭니다. async/await 패러다임을 수용하여 비동기 코드를 간소화하고 JavaScript 개발 기술을 향상시키세요.fetch

이제 async/await의 잠재력을 활용하고 자체 비동기 작업을 단순화할 차례입니다. 즐거운 코딩 되세요!