JavaScript 비동기 프로그래밍 및 콜백

프로그래밍 언어의 비동기성

컴퓨터는 설계상 비동기식입니다.

비동기는 기본 프로그램 흐름과 독립적으로 일이 발생할 수 있음을 의미합니다.

현재 소비자 컴퓨터에서 모든 프로그램은 특정 시간 슬롯 동안 실행된 다음 다른 프로그램이 실행을 계속할 수 있도록 실행을 중지합니다. 이것은 매우 빠른 주기로 실행되어 알아차릴 수 없으며 컴퓨터가 동시에 많은 프로그램을 실행한다고 생각하지만 이것은 착각입니다(멀티프로세서 시스템 제외).

프로그램은 내부적으로 시스템의 주의를 끌기 위해 프로세서에 보내는 신호인 인터럽트를 사용합니다.

나는 이것의 내부로 들어가지 않을 것이지만, 프로그램이 비동기적이고 주의가 필요할 때까지 실행을 중단하는 것이 정상이며 컴퓨터는 그 동안 다른 작업을 실행할 수 있다는 점을 명심하십시오. 프로그램이 네트워크의 응답을 기다리는 경우 요청이 완료될 때까지 프로세서를 정지시킬 수 없습니다.

일반적으로 프로그래밍 언어는 동기식이며 일부는 언어 또는 라이브러리를 통해 비동기성을 관리하는 방법을 제공합니다. C, Java, C#, PHP, Go, Ruby, Swift, Python은 모두 기본적으로 동기식입니다. 그들 중 일부는 스레드를 사용하여 비동기를 처리하고 새 프로세스를 생성합니다.

자바스크립트

JavaScript는 기본적으로 동기식이며 단일 스레드입니다. 이는 코드가 새 스레드를 생성하고 병렬로 실행할 수 없음을 의미합니다.

코드 라인은 다음과 같이 차례로 실행됩니다.

const a = 1
const b = 2
const c = a * b
console.log(c)
doSomething()

그러나 JavaScript는 브라우저 내부에서 태어났으며 처음에 주요 작업은 onClick , onMouseOver , onChange , onSubmit 등과 같은 사용자 작업에 응답하는 것이 었습니다. 동기식 프로그래밍 모델로 어떻게 이것을 할 수 있습니까?

답은 환경에 있었습니다. 브라우저는 이러한 종류의 기능을 처리할 수 있는 API 세트를 제공하여 이를 수행할 수 있는 방법을 제공합니다.

보다 최근에 Node.js는 이 개념을 파일 액세스, 네트워크 호출 등으로 확장하기 위해 비차단 I/O 환경을 도입했습니다.

콜백

사용자가 언제 버튼을 클릭할지 알 수 없으므로 클릭 이벤트에 대한 이벤트 핸들러를 정의하면 됩니다. 이 이벤트 핸들러는 이벤트가 트리거될 때 호출되는 함수를 허용합니다.

document.getElementById('button').addEventListener('click', () => {
  //item clicked
})

이것은 소위 콜백입니다.

콜백은 다른 함수에 값으로 전달되는 간단한 함수이며 이벤트가 발생할 때만 실행됩니다. JavaScript에는 변수에 할당하고 다른 함수(고차 함수라고 함)에 전달할 수 있는 일급 함수가 있기 때문에 이렇게 할 수 있습니다.

페이지가 준비되었을 때만 콜백 함수를 실행하는 load 객체의 window 이벤트 리스너에 모든 클라이언트 코드를 래핑하는 것이 일반적입니다.

window.addEventListener('load', () => {
  //window loaded
  //do what you want
})

콜백은 DOM 이벤트뿐만 아니라 모든 곳에서 사용됩니다.

한 가지 일반적인 예는 타이머를 사용하는 것입니다.

setTimeout(() => {
  // runs after 2 seconds
}, 2000)

XHR 요청은 또한 콜백을 허용합니다. 이 예에서는 특정 이벤트가 발생할 때(이 경우 요청 상태가 변경됨) 호출될 속성에 함수를 할당합니다.

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    xhr.status === 200 ? console.log(xhr.responseText) : console.error('error')
  }
}
xhr.open('GET', 'https://yoursite.com')
xhr.send()

콜백의 오류 처리

콜백 오류를 어떻게 처리합니까? 매우 일반적인 전략 중 하나는 Node.js가 채택한 것을 사용하는 것입니다. 모든 콜백 함수의 첫 번째 매개변수는 오류 개체입니다. 오류 우선 콜백

오류가 없으면 개체는 null 입니다. 오류가 있는 경우 오류에 대한 설명 및 기타 정보가 포함됩니다.

fs.readFile('/file.json', (err, data) => {
  if (err !== null) {
    //handle error
    console.log(err)
    return
  }

  //no errors, process data
  console.log(data)
})

콜백의 문제

콜백은 간단한 경우에 좋습니다!

그러나 모든 콜백은 중첩 수준을 추가하고 콜백이 많으면 코드가 매우 빠르게 복잡해지기 시작합니다.

window.addEventListener('load', () => {
  document.getElementById('button').addEventListener('click', () => {
    setTimeout(() => {
      items.forEach((item) => {
        //your code here
      })
    }, 2000)
  })
})

이것은 단순한 4단계 코드일 뿐인데 훨씬 더 많은 단계의 중첩을 보았고 재미가 없습니다.

이 문제를 어떻게 해결합니까?

콜백의 대안

ES6부터 JavaScript는 콜백을 사용하지 않는 비동기 코드에 도움이 되는 몇 가지 기능을 도입했습니다.

(ES6) 및 생성기

Async/Await (ES8)