비동기 데이터 처리 순서 : 콜백함수 vs Promise

Promise 내부에서 Promise와 콜백함수 중 어떤 데이터가 빠르게 처리될지 테스트 해보았다.

 

1. 코드

  - axios 요청 이후 3개의 then 문을 사용하였다.

  - 첫 번째 then 문에서는 또 다른 axios 요청을 보냈다.

  - 이 axios 요청과 두~세번째 then 문 중 어떤 데이터를 더 빠르게 처리할지 디버깅을 해보았다.

 

axios  // AJAX 요청
.get(`${process.env.REACT_APP_SERVER_URL}/career/1`, {
  withCredentials: true,
})
.then(res => {  // 첫번째 then 
  
  // axios 내부에서 추가로 AJAX 요청
  axios
  .get(`${process.env.REACT_APP_SERVER_URL}/career/1`, {
    withCredentials: true,
  })
  .then(res=>{
    console.log('axios')
  })
  
  console.log('1')
})
.then(res => {  // 두번째 then 
  console.log('2')
})
.then(res => {  // 3번째 then 
  console.log('3')
})

 

2. 결과

  - 연산 순서 : 1 → 2 → 3 → axios

  - axios를 통한 Promise 데이터는 나중에 처리하고, 다음 콜백 함수로 이동하여 데이터 처리

 

3. 결론

- 콜백 함수로 비동기 데이터의 처리 순서를 통제할 수 있다.

- 하지만 Promise가 있는 경우, 해당 데이터는 나중에 처리되고 다음 콜백 함수로 이동한다.