(JS) 비동기 함수를 강제로 종료시킬 수 있을까?

이미 예약(실행)된 비동기 함수는 강제로 종료시킬 수 없다

setTimeout이나 setInterval은 리턴 받은 ID로 종료시킬 수는 있지만, Ajax요청등과 같은 비동기함수드은 강제로 종료시킬 방법이 없다.

만약 비동기 함수들끼리 로직이 연결되어 있다면, 병렬로 한꺼번에 비동기 함수를 실행시키고, 만약 에러가 발생했다면 나머지 작업이 완료되지 않도록 비동기 함수를 중단시킬 수 있다.

또한, isErrorOccured란 flag를 두어 비동기 함수의 콜백함수가 실행은 되지만 flag를 통해 이후 작업을 막을 수도 있다.

let successCount = 0
let isErrorOccurred = false
const asyncFuncList = [
  asyncFunc,
  asyncFunc,
  asyncFunc_Err,
  asyncFunc,
  asyncFunc,
] // 병렬로 한꺼번에 실행시킬 비동기함수들

function asyncFunc(callback) {
  window.setTimeout(() => {
    callback()
  }, 3000)
}

function asyncFunc_Err(callback) {
  window.setTimeout(() => {
    callback('err') // 강제로 애러 발생
  }, 3000)
}

function commonCallbackFunc(isErr) {
  if (isErrorOccurred) {
    return
  }

  if (isErr) {
    // 애러처리
    console.log('애러발생!')
    console.log('지금까지 수행한 비동기함수 : ', successCount)
    isErrorOccurred = true
    return
  }

  successCount += 1 // 작업 성공이면 카운트 증가

  if (successCount === asyncFuncList.length) {
    console.log('작업 완료!')
    console.log('지금까지 수행한 비동기함수 : ', successCount)
  }
}

for (const asyncFunc of asyncFuncList) {
  asyncFunc(commonCallbackFunc) // 비동기 함수 실행
}

Callback Function

비동기 프로그래밍을 하는데 있어서, 가장 기본적인 방법은 콜백함수를 이용하는 방법이다.
콜백함수는 비동기 처리가 끝났을 때 실행해서 비동기 함수의 결과값을 처리하도록 하거나 또는 에러가 났을때 실행해서 에러처리를 하게끔 할 수 있따.

var errFlag = false

function standardCallback(err, result) {
  if (err) {
    console.log('애러 발생 : ', err) // 애러메세지 출력
    return
  }
  console.log('결과 값 : ', result) // 결과값 출력
}

function asyncFunc(callback) {
  if (errFlag) {
    callback('error') // callback 함수의 첫번째 인자값은 애러메세지
  }

  setTimeout(function() {
    callback(null, 'this is callback function!') // error가 없으므로 null
  }, 2000)
}

asyncFunc(standardCallback)

하지만, 이러한 방식으로 비동기 함수에 작업을 계속하게 될 경우(콜백함수가 중첩될 경우 등등) 가독성이 매우 떨어지게 되고 이른바, 콜백지옥에 빠질 가능성이 매우 높다.