JavaScript의 흐름 제어 : 콜백, 약속, 비동기/대기

JavaScript 비동기 프로그래밍의 핵심 사항 이 기사는 콜백 함수, 약속 및 비동기/대기하는 세 가지 주요 방법을 다루며 이해하기 쉬운 방식으로 JavaScript 비동기 프로그래밍을 논의합니다. 샘플 코드, 키 포인트 요약 및 심층 학습 리소스 링크를 통해 JavaScript 비동기 프로그래밍의 핵심 개념을 마스터하는 데 도움이됩니다.

내용 요약 :

단일 스레드 처리 콜백 함수를 사용하여 비동기 조작 를 구현하십시오 콜백 지옥

약속 Async 체인 호출 약속의 미래?

> Async/Await 약속의 업그레이드

try/catch의 한계

1. JavaScript 비동기 프로그래밍 여행
2. JavaScript의 비동기 특징
   JavaScript는 종종 "비동기"언어라고합니다. 그게 무슨 뜻입니까? 개발에 어떤 영향을 미칩니 까? 최근 몇 년 동안 그 방법에서 어떤 변화가 있었습니까?
   • 다음 코드를 고려하십시오
   대부분의 언어는 모든 코드 라인을 동시에 처리합니다. 첫 번째 줄은 결과를 실행하고 반환하며 첫 번째 줄은 첫 번째 줄에 걸리는 시간에 관계없이 첫 번째 줄이 완료된 후에 만 ​​실행됩니다.
   단일 스레드 처리
JavaScript는 단일 스레드에서 실행됩니다. 브라우저 탭에서 실행되면 다른 모든 작업이 중지됩니다. 이는 Page Dom에 대한 변경이 병렬 스레드에서 발생할 수 없기 때문에 다른 스레드가 다른 URL로 리디렉션되면 위험합니다.
3. 사용자는 처리가 작은 블록으로 빠르게 진행되므로 사용자는 거의 알지 못합니다. 예를 들어, JavaScript는 버튼 클릭을 감지하고 계산을 실행하며 DOM을 업데이트합니다. 완료되면 브라우저는 큐에서 다음 항목을 처리 할 수 ​​있습니다.
   • (참고 : PHP와 같은 다른 언어도 단일 스레드를 사용하지만 다중 스레드 서버 (예 : Apache)에서 관리 할 수 ​​있습니다. 동일한 PHP 페이지에 대한 두 개의 동시 요청은 두 개의 스레드를 시작하고 실행할 수 있습니다. PHP 실행 검역 인스턴스
   콜백 함수를 사용하여 비동기 조작
   • 를 구현하십시오
     단일 스레딩은 문제가 발생합니다. JavaScript가 서버의 브라우저 또는 데이터베이스 작업의 AJAX 요청과 같은 "느린"프로세스를 호출하면 어떻게됩니까? 이 작업은 몇 초 또는 몇 분이 걸릴 수 있습니다. 응답을 기다리는 동안 브라우저가 잠겨 있습니다. 서버에서 Node.js 응용 프로그램은 추가 사용자 요청을 처리 할 수 ​​없습니다.
   솔루션은 비동기 처리입니다. 완료를 기다리는 대신 결과가 준비되면 다른 기능을 호출하도록 프로세스를 지시합니다. 이것을 콜백 함수라고하며, 이는 비동기 기능에 대한 인수로 전달됩니다.
예 :
4. dosomethingAsync 함수는 콜백 함수를 인수로 받아들입니다 (함수에 대한 참조 만 전달하므로 오버 헤드가 작습니다). DosomethingAsync가 얼마나 오래 걸리는지는 중요하지 않습니다. 콘솔이 표시됩니다 :

   <code class="language-javascript">result1 = doSomething1();
   result2 = doSomething2(result1);</code>

   콜백 함수에 대한 자세한 내용을 읽을 수 있습니다.

   JavaScript 콜백 함수 이해 콜백 지옥

   일반적으로 콜백 함수는 하나의 비동기 기능 만 호출됩니다. 따라서 간결한 익명 인라인 함수를 사용할 수 있습니다. 콜백 함수 중첩으로 일련의 비동기 호출을 완료 할 수 있습니다. 예를 들면 :

   불행히도, 이것은 콜백 지옥을 소개합니다. 자체 웹 페이지가있는 악명 높은 개념! 오류 처리 로직을 추가 할 때 코드를 읽기 어렵고 악화됩니다.

   콜백 지옥은 클라이언트 인코딩에서 비교적 드 rare니다. Ajax 호출을하고 DOM을 업데이트하고 애니메이션이 완료되기를 기다리는 경우 2 ~ 3 개의 계층으로 들어갈 수 있지만 일반적으로 관리 가능합니다.

   운영 체제 또는 서버 프로세스의 경우 상황이 다릅니다. Node.js API 호출은 파일 업로드를 받고, 여러 데이터베이스 테이블을 업데이트하고, 로그를 쓰고, 응답을 보내기 전에 추가 API 호출을 할 수 있습니다.

   <code class="language-javascript">doSomethingAsync(callback1);
   console.log('finished');
   
   // 当doSomethingAsync完成时调用
   function callback1(error) {
     if (!error) console.log('doSomethingAsync complete');
   }</code>

   당신은 콜백 지옥에 대해 더 많이 읽을 수 있습니다.

   약속

   es2015 (ES6)는 약속을 소개합니다. 기본 레이어는 여전히 콜백 함수를 사용하지만 Promise는 chained

   <code>finished
   doSomethingAsync complete</code>

   비동기 명령에 대한 명확한 구문을 제공하여 순서대로 실행됩니다 (다음 섹션에서 자세히 설명).

   약속 기반 실행을 가능하게하려면 비동기 콜백 기반 함수를 변경하여 즉시 약속 객체를 반환해야합니다. 물체 는

   가 향후 어느 시점에서 두 기능 중 하나를 실행하겠다고 약속합니다 (매개 변수로 전달) :

   Resolve : 성공적인 완료시 실행되는 콜백 함수를 처리합니다. 거부 : 처리가 실패 할 때 실행되는 선택적 콜백 함수

   다음 예에서 데이터베이스 API는 콜백 함수를 수락하는 연결 메소드를 제공합니다. 외부 asyncdbconnect 함수는 새로운 약속을 즉시 반환하고 연결이 설정되거나 실패한 후 해결 또는 거부를 실행합니다.

   유틸리티를 제공합니다. 두 가지 조건이 있습니다 :

   콜백은 비동기 함수의 마지막 매개 변수로 전달되어야합니다 콜백 함수는 오류 매개 변수를 예상하고 값 매개 변수 가 예상해야합니다.

   예 :

   비동기 체인 호출 약속을 반환하는 것은 메소드에 정의 된 일련의 비동기 기능 호출을 시작할 수 있습니다. 각 함수는 이전 결의에서 결과를 수신합니다.

   동기화 함수는

   블록에서도 실행될 수 있습니다. 반환 값은 다음 (있는 경우)로 전달됩니다.

   메소드는 이전 거부가 트리거 될 때 호출되는 함수를 정의합니다. 현재로서는 메소드가 다시 실행됩니다. 체인 전체에서 여러 방법을 사용하여 다른 오류를 포착 할 수 있습니다. es2018은 결과에 관계없이 최종 논리를 실행하는

   메소드 (예 : 정리, 데이터베이스 연결 폐쇄 등)를 소개합니다. 모든 현대식 브라우저에서 지원됩니다 : .finally()

   약속의 미래?

   <code class="language-javascript">result1 = doSomething1();
   result2 = doSomething2(result1);</code>

   약속은 콜백 지옥을 줄이지 않고 고유 한 문제를 가져옵니다.

   튜토리얼은 종종 전체 약속 체인이 비동기식이라고 언급하지 않습니다. 일련의 약속을 사용하는 모든 함수는 자체 약속을 반환하거나 Final , 또는 메소드에서 콜백 함수를 실행해야합니다.

   약속의 구문은 일반적으로 오류가 발생하기 쉬운 장소가있는 콜백 함수보다 일반적으로 더 복잡하며 디버깅도 번거 롭습니다. 그러나 기본 사항을 배우는 것이 중요합니다.

   당신은 약속에 대해 더 많이 읽을 수 있습니다 : javaScript Promise 개요

   Async/Await

   약속은 어려울 수 있으므로 ES2017은 비동기를 소개하고 기다립니다. 단지 구문 설탕 일 수 있지만, 약속을 쉽게 사용할 수 있으며 체인을 완전히 피할 수 있습니다. 다음 약속 기반 예를 고려하십시오 .then() Async/Await을 사용 하여이 코드를 다시 작성하려면 : .catch() 외부 함수는 비동기 문으로 시작해야합니다 다음 명령을 실행하기 전에 처리가 완료되도록 약속 기반 함수를 비동기로 시작해야합니다. .finally()

   는 JavaScript에서 단일 스레드 처리를 수행하지 않고 각 통화가 동기식으로 나타납니다. 또한 비동기 함수는 항상 약속을 되돌리므로 다른 비동기 기능에 의해 호출 될 수 있습니다.

   > Async/Await 코드는 짧지 않을 수 있지만 많은 이점이 있습니다.

   구문이 명확합니다. 괄호가 적고 실수를 할 가능성이 적습니다.

   디버깅이 더 쉽습니다. 차단 점은 Await 문에서 설정할 수 있습니다. 오류 처리가 더 좋습니다. 동기 코드와 마찬가지로 Try/Catch 블록을 사용할 수 있습니다.

   좋은 지원. 모든 최신 브라우저와 노드 7.6에서 구현됩니다.

   다시 말해서, 모든 것이 완벽하지는 않습니다 ... 약속의 업그레이드

   > async/await는 약속에 따라 달라집니다.이 약속은 궁극적으로 콜백 함수에 따라 다릅니다. 이것은 당신이 여전히 약속의 작동 방식을 이해해야한다는 것을 의미합니다.

   또한, 여러 비동기 연산이 처리되면 약속과 직접적인 약속이 없습니다. 약속을 잊기 쉽습니다. .then()

   시도/캐치의 제한

   <code class="language-javascript">doSomethingAsync(callback1);
   console.log('finished');
   
   // 当doSomethingAsync完成时调用
   function callback1(error) {
     if (!error) console.log('doSomethingAsync complete');
   }</code>

   실패가 발생하는 시도/캐치를 생략하면 비동기 기능이 조용히 종료됩니다. 비동기식 대기 명령의 긴 목록이있는 경우 여러 번의 시도/캐치 블록이 필요할 수 있습니다.

   한 가지 대안은 오류를 잡아서 시도/캐치 블록을 불필요하게 만드는 고차 기능입니다 (@wesbos 덕분에 제안).

   그러나 응용 프로그램이 다른 오류와 다른 방식으로 일부 오류에 반응 해야하는 경우이 옵션이 실용적이지 않을 수 있습니다.
   몇 가지 단점에도 불구하고 Async/Await은 JavaScript에 우아한 추가 기능입니다.

   당신은 Async/Await 사용에 대한 자세한 내용을 읽을 수 있습니다 : JavaScript Async/Await Getting 시작 가이드

   JavaScript 비동기 프로그래밍 여정

   JavaScript에서 비동기 프로그래밍은 불가피한 도전입니다. 콜백 기능은 대부분의 애플리케이션에서 필수적이지만 깊이 중첩 된 기능에 갇히기 쉽습니다. 약속은 콜백 함수를 추상화하지만 많은 구문 트랩이 있습니다. 기존 기능을 변환하는 것은 집안일이 될 수 있으며. () 체인은 여전히 ​​지저분 해 보입니다.

   운 좋게도 비동기/대기는 명확성을 가져옵니다. 코드는 동기식으로 보이지만 단일 스레드로 독점적으로 처리 할 수는 없습니다. 그것은 당신이 JavaScript를 작성하는 방식을 바꿀 것이며, 당신이 전에하지 않았다면 약속을 감상 할 수도 있습니다!

   (원래 FAQ와 동일한 FAQ 부분을 여기에 추가해야합니다) 요구 사항에 따라 텍스트를 다시 작성하고 이미지의 원래 형식과 위치를 유지하기 위해 최선을 다했습니다. 외부 링크에 액세스 할 수있는 기능이 없으므로 이미지 링크의 유효성을 확인할 수 없으며 요청한 링크를 추가 할 수 없습니다. 필요한 링크를 직접 확인하고 추가하십시오.

위 내용은 JavaScript의 흐름 제어 : 콜백, 약속, 비동기/대기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!