JavaScript에서 비동기식/대기 모드 사용 및 이해

어제 업데이트된 것은 "자바스크립트의 Promise 사용 상세"입니다. 사실은 다음 기본 사용법과 자신이 Promise에 대한 이해를 말한 것입니다. 잘못된 점이 있을 수도 있고 지적하는 것을 환영합니다.오늘은 "JavaScript의 async/await 사용법과 이해"를 말씀드릴게요.
JavaScript에서 비동기식/대기 모드 사용 및 이해
프로그래밍 언어의 임의의 키워드는 모두 의미가 있으니, 우리는 먼저 글자의 뜻으로 이해합시다.
1.async
async는'비동기'의 약자입니다. async 키워드를 가진 함수입니다. 비동기 함수를 설명하고, 반환값은promise 대상입니다. 만약에 async 키워드 함수가promise가 아니라면 자동으로 Promise를 사용합니다.resolve () 포장.

async function test() {
 return 'hello word'
}
test();

위의 코드를 실행하면 결과가 다음과 같습니다.
2.await
await는 async wait의 약자라고 할 수 있다.그래서 async가 하나의 기능이 비동기적이라는 것을 설명하는 데 사용되고, await는 비동기적인 방법이 실행되기를 기다리는 데 사용된다는 것을 잘 이해할 수 있을 것이다.
만약 그것이 Promise 대상이 아니라면, await 표현식의 연산 결과는 그것이 기다린 것이다.
만약 그것이 Promise 대상일 때까지 기다린다면, await는 바쁘다. 뒤에 있는 코드를 막고 Promise 대상resolve를 기다린 다음에resolve의 값을 얻어서 await 표현식의 연산 결과로 삼을 것이다.
다음 코드를 볼게요.

function test() {
 return new Promise(resolve => {
  setTimeout(() => resolve("hello word"), 2000);
 });
}

const result = test();
console.log(result.then((val)=>{console.log(val)}));
console.log(' ')

편집기 편집기 코드 실행 순서로 정리합니다.
1. 우선 Promise 객체를 반환하는 방법을 정의합니다.then () 함수는 2초 후에 호출에 성공했습니다.
2. 다음은 test () 함수를 실례화합니다.
3.result 대상의 then () 함수를 호출하여 반환값을 수신합니다. 여기는 비동기적입니다.
4. 인쇄 로그 끝
우리는 코드를 실행하여 결과를 본다
"끝"을 먼저 인쇄하고 나서야 인쇄하는 "hello word"를 보았습니다. 이것이 바로 비동기입니다. 코드를 개조합니다

function test() {
 return new Promise(resolve => {
  setTimeout(() => resolve("hello word"), 2000);
 });
}

const result = await test();
console.log(result);
console.log(' ')

await 키워드로test () 함수를 연결하여 이번 반환 결과를 보십시오
"hello word"를 인쇄한 후에야 "끝"을 인쇄하는 것을 발견했습니다. 테스트 () 로 인한 장애, console.log('끝')은 2초 후에 실행됩니다.
장단점을 말씀드릴게요.
장점:promise에 비해async/await처리then의 호출 체인은 코드가 매우 뚜렷하고 거의 동기화 코드와 같다.
단점:await를 남용하면 성능 문제를 초래할 수 있습니다.await가 코드를 막기 때문입니다.
총결산
자바스크립트에서의 비동기/기다림의 용법과 이해에 관한 이 글을 소개합니다. 자바스크립트의 비동기/기다림의 용법과 관련된 더 많은 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!