비동기식 자바스크립트 - 나는 그것을 이해한다.

JavaScript는 단일 스레드 언어로서 한 번에 하나의 명령만 실행됩니다.모든 명령을 코드가 나오는 순서대로 실행하도록 동기화합니다.
만약 우리가 응용 프로그램에서 서버에 접근해서 데이터를 얻는 작업이 있다면, 이 과정은 매우 오랜 시간이 걸릴 것이다.만약 우리가 서버 데이터 응답을 표시하는 코드를 실행해야 한다면 어떻게 해야 합니까?서버에서 데이터를 표시하기 위해 기다리기를 원하지만 코드를 실행할 수 없습니다.
Asynchronous JavaScript를 입력하십시오. 이 기능은 동적 웹 응용을 가능하게 합니다.JavaScript 엔진에는 실행 스레드, 메모리, 호출 스택의 세 가지 주요 부분이 있다는 것을 알고 있습니다.그러나 자바스크립트는 우리가 원하는 기능을 실현하기 위해 브라우저의 다른 외부 위젯, 예를 들어 컨트롤러, 타이머, 플러그인, 네트워크 요청, HTML DOM을 필요로 하기 때문에 충분하지 않다.
자바스크립트는 웹 요청 가져오기, HTML DOM 문서, 타이머의 set Timeout, 컨트롤러의 컨트롤러와 같은 일련의 기능 (웹 API) 을 제공합니다.
FETCH API는 두 가지로 구성되어 있기 때문에 웹 브라우저에서 작업을 시작할 뿐만 아니라 주소로 네트워크 요청을 보냅니다.JavaScript에서도 Promise라는 자리 표시자 객체를 반환하는 결과가 나타납니다.

무엇이 약속입니까?
JavaScript의 약속은 실제 약속과 매우 비슷하다.예를 들어 만약 당신이 현실 생활에서 친구를 방문하겠다고 약속한다면, 이 약속은 두 가지 가능성이 있다.그것은 실현되고 해결되거나 실패하고 거절당한다.친구를 방문하면 약속이 이루어지고 해결되지만, 약속을 이행하지 못하면 거절당한다는 뜻이다.
JavaScript에서 약속은 세 가지 속성을 가진 대상입니다: 값, onCompleted, onRejected.이 약속은 미래에 해결된 값이나 해결되지 않은 원인 (예를 들어 네트워크 오류가 발생하면) 을 만들어 낼 것이다.
우리는 약속이 코드를 어떻게 사용하는지 설명하는 예를 보게 될 것이다. 그러나 시작하기 전에, 우리는 개념을 정의해서 우리를 도와야 한다.
이벤트 순환 - 코드를 실행하고 이벤트를 수집하고 처리하며 줄을 서는 하위 작업을 수행합니다.
리셋 대기열 - 이 곳에서 비동기 코드가 전송되고 이벤트 순환이 호출 창고로 전송될 때까지 기다립니다.
마이크로퀘스트 대기열 - 리셋 대기열과 유사하지만 우선순위가 높습니다. 이것은 이벤트 순환이 리셋 대기열에 들어가기 전에 마이크로퀘스트 대기열이 비어 있는지 확인하는 것을 의미합니다.
실행 상하문 - 현재 코드 실행 환경에 대한 모든 정보를 저장합니다.

const display = (response) => {console.log(response)}
const sayHi = () => {console.log(`say Hi`)}
const runFor300ms = () => { 
   // code that will run for 300ms
}
setTimeout(sayHi, 0)
const futureDisplay = fetch(`https://someserver.com/data/alex/1`)
futureDisplay.then(display)
runFor300ms()
console.log(`I am first`) 

JavaScript 엔진처럼 위의 코드 세그먼트를 탐색합니다.

const display = (response) => {console.log(response)}

우선, 함수 디스플레이를 설명하고 전역 메모리에 저장합니다.

const sayHi = () => {console.log(`say Hi`)}

글로벌 메모리에 함수sayHi를 선언하고 저장합니다.

const runFor300ms = () => { 
   // code that will run for 300ms
}

세 번째 줄에서는 함수runFor300ms를 설명하고 글로벌 메모리에 저장합니다.

setTimeout(sayHi, 0)

setTimeout () 방법을 호출하면 웹 브라우저의 타이머를 터치합니다. 0밀리초에 함수sayHi, 즉 타이머가 만료된 시간으로 설정됩니다.정확하게 0밀리초 (즉 즉시) 까지 sayHi 함수는 리셋 대기열에 밀어넣었습니다. 호출이 비어 있고 전역 실행 라인이 완성되기를 기다리고 있습니다.

const futureDisplay = fetch(`https://someserver.com/data/alex/1`)

다음에 예를 들어 1ms, 상수futureDisplay는 전역 메모리에서 그 값은 FETCH에 대한 구값이라고 성명한다. FETCH는 WEB API로 프로미스 대상을 되돌려주고futureDisplay에 즉시 저장한다.이 대상은 세 가지 속성이 있습니다.Value,undefined,oncompleted,onRejected. 모두 빈 그룹입니다.웹 브라우저에서 FETCH 함수는 네트워크 요청을 터치하여 전송된 주소에서 데이터를 가져옵니다.이 응답이 되돌아올 때마다 데이터는promise 대상의Value 속성에 저장되어 이전의 '정의되지 않은' 값을 대체합니다.

futureDisplay.then(display)

다음 줄에서 요청이 이 주소로 전송됩니다.데이터 응답은 언제든지 반환할 수 있으므로 데이터를 반환할 때 JavaScript가 데이터를 자동으로 사용하는 방법이 필요합니다.이것이 바로 프로미스 대상의 onCompleted 속성의 작용이다.우리는 하나의 함수를 oncompleted 그룹에 슬라이드할 수 있으며,value 속성이 채워질 때, 함수는value 속성의 내용을 입력으로 실행할 수 있습니다.이거.그리고 디스플레이 함수를promise 대상의 onCompleted 속성에 전송하는 데 사용합니다.

runFor300ms()

2ms에서 함수runFor300ms를 실행하여 새로운 실행 상하문을 만들고 함수를 호출 창고에 밀어넣습니다.이 코드는 300밀리초 동안 실행될 수 있는 어떤 형식의 for 순환일 수도 있습니다.또한 250ms에서 FETCH 함수를 호출하여 트리거한 네트워크 요청이 해석되고 문자열 "Hello"로 응답합니다.이 문자열은 "undefined"를 future Display의value 속성으로 대체합니다.함수 표시는 OnCompleted 객체에서 반환되고 실행될 때까지 마이크로 작업 대기열에 저장됩니다.

runFor300ms()가 실행되고 호출 스택에서 팝업됩니다.

console.log(`I am first`) 

마지막 줄을 실행하고 콘솔에서'나는 1등이다'라고 기록합니다.

303ms에서 이벤트 순환 검사 호출 창고와 전역 실행 상하문이 비어 있는지 확인합니다.마이크로 작업 대기열의 우선 순위가 리셋 대기열보다 높기 때문에 이벤트 순환은 어떤 것을 실행해야 하는지 확인합니다.디스플레이 함수가 실행되기를 기다리고 있는 것을 발견하고 호출 창고에 밀어 넣습니다.함수를 실행하고 문자열 "Hello"를 인쇄합니다.

그리고 이벤트 순환 검사 리셋 대기열에서sayHi가 인내심을 가지고 기다리고 있는 것을 발견했습니다.그것은 그것을 실행할 호출 창고에 밀어 넣었다.실행할 때 '어이' 를 인쇄합니다.

우리의 생산량은 주문서에 부합될 것이다

'I am First'
'Hello'
'Hi'

결론
promise 대상의 onRejected 속성도 빈 그룹인 거 기억나세요?네트워크 요청이 실패하면 스토리지에 저장된 모든 함수가 실행됩니다.이것은 오류 처리에 사용되며 사용됩니다.포착 방법.
약속, WEB API, 이벤트 순환, 마이크로 작업과 리셋 대기열은 비동기적인 자바스크립트를 구성하고 현대 WEB의 등받이이다.그것이 우리에게 제공하는 기능은 우리로 하여금 단일 라인에서 기다리지 않고 더 이상의 코드 운행을 막을 수 있게 한다.