async/await이란?#17

👉async/await이란?

안녕하세요 TriplexLab 입니다.
이번 시간부터 async/await관해서 이야기를 해보겠습니다.

(async/await이란 fetch함수말고, Promise객체를 좀더 간단하게 다룰수 있는 방법 입니다. 😃😃👏👏👍)

async/await 설명

자 이제 위에 있는 이미지에서 강조한 부분들을 설명하도록 하겠습니다.

Promise객체가 등장하므로써 콜백핼 문제를 해결하고, 비동기 실행 코드를 조금더 보기좋게 작성하는것이 가능해 졌습니다.
Promise객체가 등장한 이후에도 더 발전했습니다. async/await의 구분 입니다.
async는 비동기라는 의미 입니다. async는 함수안에 비동기적으로 실행 될 부분이 있다는것을 의미합니다.

asynchronous의 줄임말

asynchronous의 줄임말로 우리가 배운 비동기를 의미합니다.

그럼 함수안에 비동기적으로 실행 될 부분이 어디일까요? 바로 await 붙어 있는 코드 입니다. await은 무엇으로 부터 기다리다라는 뜻을 가지고 있습니다. 여기서는 Promise객체를 리턴하는 코드앞에 붙어 있습니다.
await은 그 뒤에코드를 실행하고, 그코드가 리턴하는 Promise객체를 기다려 줍니다. 해당 Promise객체가 fullfield상태 또는 rejected상태 가 될때까지 기다립니다.

그리고 Promise객체가 fullfield상태가 되면 그 작업 성공 결과를 추출해서 리턴하는데요.

await은 무엇으로 부터 기다리다라는 뜻

👇아래 await은 fetch함수에서 리턴하는 Promise객체가 fullfield상태 가 될때까지 기다립니다.
fullfield상태 가 되면 작업성공 결과인 response객체를 추출해서 리턴하는것 입니다.
그리고 나면 다음줄 코드가 실행되는것 입니다.

response객체를 추출해서 리턴

👇아래 await도 마찬가지로 response객체에 text메서드는 Promise객체를 리턴합니다.
그럼 text메서드가 리턴하는 Promise객체가 fullfield상태 가 될때까지 기다립니다.
fullfield상태 가 되면 작업 성공 결과를 추출해서 리턴합니다. 그럼 response의 실제 내용이 result에 담김니다.

response의 실제 내용이  result에 담김

👉 계념 정리

await은 뒤에 있는 코드를 실행하고, 그것이 리턴하는 Promise객체가 fullfield상태가 될때까지 기다립니다. 그리고 해당 Promise객체가 fullfield상태가 되면 그 작업성공 결과를 추출해서 리턴합니다.

async가 붙어 있는 함수 안에 비동기 실행이 되는 부분이 있다라는 뜻은 함수의 코드 중에서 Promise객체를 리턴하는 코드가 있다라는 뜻 입니다. 그리고 그 앞에는 await를 붙여서 Promise객체가 fullfield상태가 될때까지 기다려주는것 입니다. 그리고 fullfield상태가 되고, 그 작업 성공 결과을 리턴하는 후에야 그 다음줄을 실행하게 되는 것 입니다.

async function fetchAndPrint() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
	return await response.text();
}

console.log(fetchAndPrint())