Fetch를 이용한 함수에서 데이터를 Return 하고싶습니다.

JavaScript
1

안녕하세요. 개발자여러분들. 질문이 있어 가입해서 주제를 만들게되었습니다.
다름이 아니라 코드를 좀 간결하게 짜고 싶어서 묻고싶은게 있는데요.

async A(){
  let response = await fetch(URL);
  let data = await response.json()
  return data;
}

이처럼 함수를 만들어놓고,

A().then(data => console.log(data));

이것과 같은 형태를 써야만 데이터에 접근할 수 있다는걸 알겠는데요,
저 한테 필요한것은

console.log(A());

이것과 같은 접근입니다.
페이지를 구축할때

${A().data}

이것과 같은 표현을 하고싶거든요.
이렇게 사용할 수 있는 방법이 있는지 아시는분들의 도움이 필요합니다.

2

질문이 잘 이해가 안 가긴 하지만…

async function A(){
  const response = await fetch(URL);
  const data = await response.json()
  return data;
}

console.log(await A())
로 하실 수 있습니다.

예를 들자면

const URL = 'https://baconipsum.com/api/?type=meat-and-filler'
const A = async () => {
  const response = await fetch(URL);
  const data = await response.json()
  return data;
}
(async () => {
  console.log(await A())
})()
// Mollit aute lorem labore, rump ad pastrami sunt dolor bresaola.  Fatback t...

이런 거죠.

await을 써야만 하는 이유는 async function은 기본적으로 무조건 Promise를 반환하기 때문입니다. Promise가 resolve하거나 reject된 값을 받으려면 await나 then을 써야해요. 말씀하신 코드처럼 톱 레벨에서 resolve된 값을 받아오는 방법은 await밖에 없습니다.

1개의 좋아요