[Axios/Fetch] 함수 내에서 AJAX 요청으로 받은 데이터를 리턴하기?

프로젝트 진행 중 함수 내에서 AJAX 요청을 주고 받고, 해당 데이터를 return하려고 했으나 실패했다.

 

문제 상황 및 원인

- 상황 : 함수 내에서 AJAX 요청으로 받은 데이터를 return 하려고 했으나 실패

- 원인 : AJAX를 통해 데이터를 받기 전에 이미 return문이 실행됨 (return 문 실행 이후 비동기 처리가 이루어짐)

 

const testHandler = () => {
  let testData = []
  axios.get(  // return 문 실행 이후 비동기 처리 진행
    `http://localhost:5000/career/${jobSeekerId}`, 
    {withCredentials: true}
  )
  .then((res)=>{
    testData=[...res.data.data]
  })
  return testData  // return 문이 먼저 실행
}

 

 

해결방안

- 비동기 처리로 받은 데이터는 콜백함수 내에서 다루어야야 함

- state를 선언하고, Axios 요청으로 받은 데이터를 then 문에서 state에 할당

 

const [testData, setTestData] = useState([])

const testHandler = () => {
  axios.get(
    `http://localhost:5000/career/${jobSeekerId}`, 
    {withCredentials: true}
  )
  .then((res)=>{
    setTestData([...res.data.data])  // AJAX 요청으로 받은 데이터를 then 문에서 할당
  })
}

console.log(testData) // AJAX 요청으로 받은 데이터가 testData에 할당