Async & await 간단히 설명

Async & await는 기본적으로 약속 위에 구문 설탕입니다. 다음은 Async 및 await에 대한 저의 최신 게시물과 매우 짧고 놀라운 설명입니다.


함수 정의 전에 async 키워드를 사용하면 함수 내에서 await를 사용할 수 있습니다. Await는 약속이 해결될 때까지 차단하지 않는 방식으로 함수를 일시 중지할 수 있는 권한을 제공합니다.

약속이 이행되면 값을 돌려받습니다. 그렇지 않은 경우 거부된 값이 throw됩니다. 아래에 완벽한 예가 있습니다.

async function fetchUsers( endpoint ) {
  const res = await fetch( endpoint );
  const data = await res.json();
  const usernames = data.map( user => user.username);
  console.log(usernames);
}

fetchUsers( 'https://jsonplaceholder.typicode.com/users'); 
/* 
["Bret", "Antonette", "Samantha", "Karianne", "Kamren", "Leopoldo_Corkery", "Elwyn.Skiles", "Maxime_Nienow", "Delphine", "Moriah.Stanton"]
*/

먼저 지정된 엔드포인트를 가져옵니다. 이 시점에서 함수는 가져오기 약속이 이행될 때까지 일시 중지됩니다.

그런 다음 응답을 읽고 JSON으로 구문 분석합니다. 우리도 그것을 기다리고 있기 때문에 JSON()는 약속이기도 합니다. 우리는 그것이 이행될 때까지 기능을 다시 일시 중지합니다.

모든 작업이 완료되면 검색된 데이터를 사용하고 예를 들어 매핑하고 콘솔에 기록할 수 있습니다.

기다림 중 하나가 거부되는 것은 무엇입니까?

=> 우리는 모든 await에 catch()를 추가할 수 있습니다.

기다림에 캐치가 추가되면 함수가 아래 예와 같이 표시됩니다.

async function fetchUsers( endpoint ) {
  const res = await fetch( endpoint ).catch(e => console.error(e.message));
  const data = await res.json().catch(e => console.error(e.message);
  const usernames = data.map( user => user.username);
  console.log(usernames);
}

더 읽어보기 :-

도움이 필요합니다

기계식 키보드 구매를 위한 기금 모금에 도움이 필요합니다. 이 팬데믹은 우리 가족에게 심하게 영향을 미쳤기 때문에 아빠에게 요청할 수 없습니다. 도와주세요.






이것은 내가 공유하고 싶었던 짧은 것입니다!
⚡행복한 코딩.