(8) Asynchronous JavaScript - async 함수의 리턴값

  // asyncFunction.js
  async function getList() {
      const response = await fetch(`https://todo-api.fesp.shop/api/todolist`)
      const data = await response.json();
      console.log(data);
    }
  printList()

async 함수 안에서 await를 마주치면 뒤에있는 Promise가 Fulfilled가 될 때 까지

함수 바깥에 있는 코드를 실행하다가

다시 함수 안으로 돌아와서 코드를 이어서 실행한다고 했었다.

---

async 함수의 리턴값

async 함수는 항상 Promise를 리턴하는데 그 예시를 살펴보자.

// asyncFunction.js
export async function getList () {
  const response = await fetch('https://todo-api.fesp.shop/api/todolist');
  const data = await response.json()
  return data;
}

printList함수의 데이터를 출력하지 않고 리턴하기 위해

위와 같은 코드를 작성한다.

그리고 main 파일에서 getList 함수를 사용한다.

  // main.js
  import { getList } from "./asyncFunction.js";

  const List = getList();
  console.log(List);

getList 함수의 리턴값을 List 변수에 할당하고 List 변수를 출력 하였다.

코드를 실행하면 다음과 같은 결과를 확인할 수 있다.

이번에도 Promise pending이라고 나오는데

분명히 getList 함수 안에서는 await을 잘 활용해서 데이터를 추출했음에도 불구하고

데이터를 List 변수에 할당해서 출력하니까 Promise pending 결과가 나왔다.

 

그 이유가 async 함수는 항상 Promise를 리턴하기 때문이다.

async 함수가 Promsise를 리턴해야 하는 이유에 대해 생각해보자.

 

함수가 async라는 것은 보통 안에 await문이 있다는 것이고

await문이 있다는 것은 어떤 비동기 작업, 비교적 오래 걸리는 작업을 처리한다는 것이다.

그러니까 async 함수 자체에도 끝까지 실행하려면 꽤나 오래 걸리기 때문에

getList 함수도 끝까지 실행하려면 fetch와 json 함수를 기다려야한다.

그렇기 때문에 getList 함수를 호출하면 리턴값을 바로 알 수가 없다.

 

그래서 async 함수는 일단 Promise를 리턴해주고

함수의 body가 다 실행되고 리턴값이 정해지면 Promise를 Fulfilled 상태로 바꿔주고 

함수의 리턴 값을 Promise의 결과값으로 채워 주는 것이다.

결국, Promise의 결과값을 받아오려면 앞에 await를 써줘야한다.

  // main.js
  import { getList } from "./asyncFunction.js";

  const List = await getList();
  console.log(List);

조금 복잡하게 느껴져도 Promise 에서 성공 결과값을 받아오려면

await을 써주면 된다는 사실만 알고 있으면 된다.

 

정리하자면

일단 getList 함수를 실행하면 pending 상태의 Promise가 바로 리턴된다.

getList 함수를 끝까지 실행하는데는 시간이 걸리는데끝까지 실행이 되고 data를 리턴하면data가 Promise에 채워지고 Promise의 상태는 Fulfilled로 바뀐다.그리고 앞에 await를 썼기 때문에 Promise의 결과값이 List 변수에 할당되는 것이다.실행 결과, 데이터가 잘 출력된 것을 확인할 수 있다.

 

이제 이 데이터를 마음대로 사용할 수 있으니다음과 같이 배열에서 요소 하나만 가져올 수도 있다.

  // main.js
  import { getList } from "./asyncFunction.js";

  const List = await getList();
  const List1 = List[0];
  console.log(List1);

 

그런데 여기서 주의할 점이있다.

async 함수 본문에서 Promise를 리턴하는 경우인데

// asyncFunction.js
export async function getList () {
  const response = await fetch('https://learn.codeit.kr/api/menus');
  return response.json()
}

이렇게 되면 response.json은 Promise 인데

이런 경우에는 getList가 리턴하는 Promise는 

함수가 리턴하는 Promise와 동일한 상태의 결과값을 갖게된다.

 

그러니까 response.json이 성공해서 이것에 해당하는 Promise가 Fulfilled 상태가 되고

parsing된 데이터를 결과값으로 갖게되면 

getList가 리턴하는 Promise도 Fulfilled 상태가 되고

parsing된 데이터를 결과값으로 갖게된다.

 

그래도 getList 앞에는 이미 await가 있기 때문에

코드를 실행해보면 결과가 잘 출력될 것이다.

 

그래서 결론이 뭐냐?

response.json이 비동기 작업이라는 것을 알기 힘들기 때문에

response.json이 성공한다 한들 Promise를 리턴하지 말고이전 코드를 사용해야 어떤 작업을 await 하는지 한눈에 알아보기 쉽고함수의 흐름에 대해 생각하기도 편하다.