예제가 포함 된 JavaScript Async/Seewait에 대한 초보자 가이드

마스터 JavaScript 비동기 연산 : Async/Await 자세한 설명

이 기사는 javaScript에서 심층적 인 /를 탐색하여 비동기 작업을 효율적으로 제어하고 더 명확하고 읽기 쉬운 코드를 작성하는 방법을 가르쳐줍니다.

코어 포인트 :

async JavaScript에서 /await> 비동기 작업의 처리를 단순화하여 코드가 동시에 실행되는 것처럼 보이지만 여전히 차단하지 않습니다.

함수는 약속을 반환하고 키워드는 약속이 해결 될 때까지 함수 실행을 일시 중지하여 코드 및 흐름 제어의 가독성을 향상시킵니다.

함수의 오류 처리는 /

블록 또는 메소드를 사용하여 효율적으로 관리 할 수 ​​있습니다. async await를 사용하여 실행 실행 비동기 명령을 병렬로 최적화하여 다중 를 순차적으로 실행하는 대신 동시에 해결할 수 있습니다.
• 비동기 반복자 및 루프는 루프에서 async 함수의 올바른 처리를 허용하여 올바른 실행 순서와 더 나은 성능 관리를 보장합니다. await ES2022에 의해 도입 된 최상층은 ES 모듈의 최상위 계층에서
를 사용하여 추가 포장지없이 비동기 코드의 통합을 단순화 할 수 있습니다.
• async 내용 요약 : try catch JavaScript 비동기 함수를 만드는 방법 키워드 키워드 비동기 함수를 선언하는 다른 방법 Promise catch() javaScript 지하 사용 약속 약속에서 /
• 로 전환하십시오 Promise.all Promise 비동기 함수 의 오류 처리
함수 호출을 사용한 메소드
• for...of async 병렬로 비동기 명령을 실행하십시오 동기 루프에서 비동기식
• await 최상위 레벨 await 비동기 코드를 자신있게 쓰기

JavaScript에서 일부 작업은 비동기입니다. 이것은 그들이 생산하는 결과 또는 가치를 즉시 사용할 수 없음을 의미합니다.

다음 코드를 고려하십시오 <strong> <davascript> 함수가 완료되기를 기다리지 않습니다. 따라서 API </davascript></strong>

가 반환 한 실제 데이터를 기록합니다.

대부분의 경우, 이것은 예상되는 행동이 아닙니다. 다행스럽게도
1. 및
   키워드를 사용하여 프로그램이 계속 실행되기 전에 비동기 작업이 완료되기를 기다릴 수 있습니다.
   • 이 기능은 ES2017에서 JavaScript를 소개하며 모든 현대식 브라우저에서 지원됩니다. async JavaScript 비동기 기능을 만드는 방법
   • 함수의 데이터 수집 로직을 자세히 살펴 보겠습니다. JavaScript의 데이터 가져 오기는 비동기 작업의 주요 예입니다. await Fetch API를 사용하면 다음을 수행 할 수 있습니다

     function fetchDataFromApi() {
       // 数据获取逻辑
       console.log(data);
     }
     
     fetchDataFromApi();
     console.log('数据获取完成');

     여기, 우리는 Jokeapi로부터 프로그래밍 농담을 얻습니다. API의 응답은 JSON 형식이므로 요청이 완료된 후 (<🎜 🎜> 메서드 사용) 응답을 추출한 다음 농담을 콘솔에 로그온합니다.

     <🎜 🎜> <<> Jokeapi는 타사 API이므로 우리가 돌아 오는 농담의 질을 보장 ​​할 수는 없습니다! json() <<> 우리 가이 코드를 브라우저 나 노드 (<🎜 🎜> 플래그를 사용하는 버전 17.5)에서 실행하면 콘솔이 여전히 잘못된 순서로 컨텐츠를 기록하고 있음을 알 수 있습니다.

     변경합시다.

     <🎜 🎜> <<> 키워드 <🎜 🎜> 우리가해야 할 첫 번째 일은 포함 함수를 비동기 기능으로 표시하는 것입니다. 우리는 <🎜 🎜> 키워드를 사용하여이를 수행 할 수 있으며 키워드 앞에 놓습니다. Async 함수는 항상 약속을 반환합니다 (나중에 더 자세히 설명).

     를 함수 호출에 링크하여 올바른 실행 순서를 얻으십시오 :

     . --experimental-fetch 지금 코드를 실행하면 다음과 같은 것을 볼 수 있습니다.

     그러나 우리는 이것을하고 싶지 않습니다! JavaScript의 Promise Syntax는 약간 복잡 할 수 있으며, <🎜 🎜>/

     플래시 : 동기 코드와 비슷하게 보이는 구문을 사용하여 비동기 코드를 작성할 수 있으며 읽기가 더 쉽습니다.

     <🎜 🎜> <<> 키워드 <🎜 🎜> 다음으로해야 할 일은

     키워드와 함께 함수의 비동기 작업을 서문하는 것입니다. 이로 인해 JavaScript 통역사가 "일시 중지"실행을 일시 중지하고 결과를 기다릴 수 있습니다. 이러한 작업 결과를 변수에 할당 할 수 있습니다. async 우리는 또한

     함수를 호출 한 결과를 기다려야합니다 : <🎜 🎜>

     불행히도, 지금 코드를 실행하려고하면 오류가 발생합니다. async 이것은 모듈이 아닌 스크립트에서 function 함수를 벗어난

     를 사용할 수 없기 때문입니다. 나중에이 문제를 해결할 수 있지만 이제이 문제를 해결하는 가장 쉬운 방법은 자체 기능으로 통화 코드를 래핑하는 것입니다.

     function fetchDataFromApi() {
       fetch('https://v2.jokeapi.dev/joke/Programming?type=single')
         .then(res => res.json())
         .then(json => console.log(json.joke));
     }
     
     fetchDataFromApi();
     console.log('数据获取完成');

     지금 코드를 실행하면 모든 것이 올바른 순서로 출력되어야합니다.

     우리 가이 추가 보일러 플레이트 코드가 필요하다는 사실은 불행하지만, 제 생각에는 코드가 약속 기반 버전보다 여전히 읽기가 더 쉽습니다. then() 비동기 함수를 선언하는 다른 방법 <🎜 🎜> 이전 예제는 두 개의 이름이 지정된 함수 선언 (

     키워드 다음 함수 이름)을 사용하지만 이에 국한되지 않습니다. 또한 함수 표현식, 화살표 함수 및 익명 함수를

     async function fetchDataFromApi() {
       fetch('https://v2.jokeapi.dev/joke/Programming?type=single')
         .then(res => res.json())
         .then(json => console.log(json.joke));
     }

     로 표시 할 수도 있습니다.
     <<> 함수 선언과 함수 표현식의 차이점을 검토하려면 가이드 <🎜 🎜> <🎜 🎜 🎜>를 확인하십시오.

     fetchDataFromApi()
       .then(() => {
         console.log('数据获取完成');
       });

     (다음 내용은 동일합니다. 원래 텍스트에 따라 단락으로 단락을 다시 작성하고 원래 의미를 유지하고 언어 스타일을 조정하여 더 부드럽고 자연스럽게 만들어

위 내용은 예제가 포함 된 JavaScript Async/Seewait에 대한 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!