더 이상 지옥을 약속하지 않습니다. async await를 사용하는 것은 상상할 수 있는 것보다 훨씬 쉽습니다.

비동기 대기를 사용하는 가장 간단한 방법

이전 JavaScript 버전

async function myFunction ( ){
  const value= await promise;

   //use the value now
   console.log(value);
}
myFunction()

ES6 버전

const myFunction = async ( )=>{
   const value= await promise;

   //use the value now
   console.log(value);
}

myFunction();

async 앞에 함수를 정의하십시오. 이제 이 함수 내에서 await를 사용할 수 있습니다. const value = await promiseFunction()과 같이 사용하십시오. 어떻게 작동합니까? 약속은 해결하는 데 시간이 걸립니다. 이 대기는 약속이 해결될 때까지 리모콘처럼 코드를 일시 중지합니다. 해결되면 받은 데이터를 값 변수에 저장합니다.

ASYNC AWAIT 사용을 위한 전체 가이드

const getData = async( )=>{
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');

  const data = await response();

  console.log(data);
}
getData( );

코드에서 무슨 일이 일어나고 있습니까?

먼저 async를 사용하여 함수를 정의합니다. 이제 이 함수 내에서 await 키워드를 사용할 수 있습니다. 우리가 알고 있듯이 Fetch도 Promise입니다(예로 fetch를 사용했으며 원하는 모든 약속을 사용할 수 있습니다). 그래서 나는 그 전에 await를 사용했습니다. 내 말은, 가져오기가 비동기식이므로 응답을 가져오는 데 시간이 걸립니다. await는 Fetch가 응답을 가져올 때까지 코드를 일시 중지합니다. 그런 다음 코드를 다시 시작합니다. 그리고 응답 변수 안에 응답을 저장합니다.

마찬가지로 response.json()도 비동기식입니다. 따라서 await를 사용하여 약속이 해결될 때까지 코드를 일시 중지합니다. 그럴 때 데이터 변수 안에 수신된 데이터를 저장합니다.

우리가 얼마나 많은 약속을 받든 async await는 완전히 동기 코드처럼 보이게 만듭니다. 10000개의 프라미스가 있다고 가정하고(연이어), async await를 사용하면 다음과 같을 것입니다.

const myPromiseHell = async( )=>{
  const A = await promiseA;
  const B = await PromiseB;
  const C = await PromiseC;
  //...10000s more
}

async await를 사용하는 것이 얼마나 쉬운지 확인하십시오. 이제 Promises 또는 Callbacks를 사용하는 경우 궁극적인 악몽이 될 것이라고 상상해 보십시오.

데모(재생 시간)

브라우저 콘솔에 이 코드를 복사하여 붙여넣고(크롬) Enter 키를 누릅니다.

const getData = async ( ) =>{
   const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');

   const data = await response.json( );

   console.log(data);
}

getData( );

FETCH API에 대한 자세한 내용은 이 블로그를 참조하십시오.

궁금한 사항이 있거나 막힌 경우

언제든지 연락주세요. LinkedIN 또는 Twitter(
).

나에 대해 더 알고 싶다면 여기가 내 포트폴리오 웹사이트SilvenLEAF.github.io

나는 당신의 친구가 되고 싶습니다, 저에게 연락 주시기 바랍니다!

다음 블로그 날짜

2020년 11월 12일, 14일, 16일, Passport로 로그인 가입 시스템 만들기(시리즈)

2020년 11월 18일, Google로 로그인을 만드는 방법

2020년 11월 20일, Github으로 로그인을 만드는 방법

2020년 11월 22일, LinkedIn 로그인 생성 방법

2020년 11월 24일, Twitter로 로그인을 만드는 방법

2020년 11월 26일, 28일, 30일, 비밀번호 재설정 시리즈(Node.js 및 React 포함)

이 블로그가 도움이 되셨다면,

좋아요와 공유 부탁드려요,

그것은 나에게 많은 의미가 될 것입니다. 감사

이전 블로그

다음 블로그