분류 javascript

JavaScript에서 비동기 함수의 결과를 반환하는 방법

컨텐츠 정보

  • 조회 185 (작성일 )

본문

JavaScript를 사용하여 비동기 함수, 약속(promise) 기반 또는 콜백(callback) 기반의 결과를 반환하는 방법 알아보기


이 문제가 있다고 가정 해 봅시다 : 당신은 비동기식 호출을 하고 있고, 그 호출의 결과가 원래 함수에서 리턴 되어야 합니다.


https://flaviocopes.com/how-to-return-result-asynchronous-function/ 


예:


const mainFunction = () => {
  const result = asynchronousFunction()
  return result
}


그러나 asynchronousFunction()은 비동기 호출 (예 : fetch() 호출)을 수행하며 결과 값을 직접 리턴 할 수 없습니다. 아마도 내부적으로 기다려야 할 약속이나 콜백이 있을 수 있습니다. 


예:

const asynchronousFunction = () => {
	fetch('./file.json').then(response => {
    return response
  })
}


대신 무엇을 할 수 있습니까?


Async/await는 가장 간단한 솔루션입니다. 이전에 사용한 것과 같은 약속 기반 접근 방식 대신 await 키워드를 사용합니다.


const asynchronousFunction = async () => {
	const response = await fetch('./file.json')
  return response
}


이 경우 mainFunction은 아무것도 변경할 필요가 없습니다.


const mainFunction = () => {
  const result = asynchronousFunction()
  return result
}


코드는 다른 언어에서 사용되는 동기 코드처럼 보이지만 완전히 비동기 적입니다.


또 다른 방법은 콜백을 사용하는 것입니다. 그러나 async / await를 사용하면 asynchronousFunction() 코드만 변경할 수 있습니다.이 경우에는


  1. asynchronousFunction() 코드 수정
  2. mainFunction() 코드 수정
  3. 호출 코드도 수정

다음은 예입니다. asynchronousFunction()은 새로운 함수를 매개 변수로 받아 콜백이라고 합니다. response 객체를 전달하여 호출합니다.


const asynchronousFunction = callback => {
	fetch('./file.json').then(response => {
    callback(response)
  })
}


이 함수는 mainFunction에 의해 전달됩니다.


const mainFunction = () => {
  const callback = result => {
    console.log(result)
  }

  asynchronousFunction(callback)
}

퍼즐의 마지막 조각은 mainFunction을 호출하는 함수에 있습니다. mainFunction에서 바로 응답을 반환 할 수 없기 때문에 비동기 적으로 응답을 받기 때문에 호출 함수가 처리 방식을 변경해야 합니다.


따라서 const result = mainFunction() 대신에


const callbackFunction = result => {
  console.log(result)
}

const mainFunction = callback => {
  asynchronousFunction(callback)
}

//call the code

mainFunction(callbackFunction)