es6 또는 es7을 기다리고 있습니까?

기다리는 것은 es7입니다. async 및 Wait는 ES7에 새로 추가된 기능이며 비동기 작업을 위한 솔루션입니다. 이름에서 알 수 있듯이 async는 "비동기"를 의미합니다. Async는 함수가 비동기임을 선언하는 데 사용되며 문자 그대로 "대기"를 의미하며 비동기 완료를 기다리는 데 사용됩니다. async와 wait 사이에는 엄격한 규칙이 있습니다. 둘 다 서로 분리될 수 없으며, wait는 비동기 함수로만 작성할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 7, Dell G3 컴퓨터.

최신 ES7(ES2017)에서 제안된 프런트엔드 비동기 기능: async, wait.

1. 비동기 및 대기

async 및 대기는 ES7에 새로 추가된 기능으로, 비동기 작업에 대한 솔루션을 위한 생성기 함수의 구문 설탕입니다.

• async|await는 비동기식으로 작성하는 새로운 방법입니다. 이전에는 ES6에서 promise가 사용되었습니다.
• async|await는 Promise에 기반한 새로운 작성 방법입니다.

• async|await도 비차단입니다.

async는 이름에서 알 수 있듯이 "비동기"를 의미합니다. async는 함수가 비동기임을 선언하는 데 사용됩니다. 그리고 wait는 문자 그대로 "대기"를 의미하며 비동기 완료를 기다리는 데 사용됩니다.

Async와 Wait에는 엄격한 규칙이 있습니다. 둘 다 서로 없이는 살 수 없습니다. 그러나 Wait는 비동기 함수로만 작성할 수 있습니다.

2. 사용법

async가 반환 값을 처리하는 방법
async의 반환 값은 promise 개체입니다. 즉, promise의 메서드를 통해 반환 값을 promise 개체에 직접 캡슐화한다는 의미입니다. .

async function Async() {
return "hello world";
}
const result = Async();
console.log(result);

결과에 따르면 async 함수는 promise 객체를 반환하고, 반환 값을 promise 객체에 직접 캡슐화하는 것으로 보입니다.

반환값이 없을 경우

async function Async() {
    console.log("hello world");
}
let result1 = Async();
console.log(result1);

결과를 보면 async 함수가 promise 객체를 반환하는 것으로 보이는데, 당시의 값은 정의되지 않았습니다. 그러므로. Wait가 없으면 Promise 객체가 반환되고 후속 명령문을 차단하지 않습니다.

하지만 Waitwait는 무엇입니까?

function time(s) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
async function Async(value, s) {
  await time(s);
  console.log(value);
}
Async('hello world', 50);

50밀리초 후에 hello world가 출력되도록 지정하세요.

일반적으로 Wait는 async 함수가 완료될 때까지 기다리는 데 사용되며, 표현식의 계산 결과는 Promise 개체 또는 기타 값이므로 실제로는 일반 함수 호출이나 직접 수량을 받을 수 있습니다.
Wait가 Promise 개체를 기다리지 않는 경우 표현식 작업의 결과는 기다리고 있는 것입니다.
Promise 객체인 경우 Wait는 후속 코드를 차단합니다. Promise 객체가 성공적으로 처리되면 얻은 값은 Wait 식의 연산 결과입니다. 대기는 블록이지만 비동기는 차단되지 않습니다. 내부의 모든 차단은 약속 개체에 캡슐화되어 비동기적으로 실행됩니다.

await 문이 거부 상태로 변경된 후 모든 Promise 개체는 전체 비동기 함수의 실행이 중단됩니다.

async function Async() {
  await Promise.reject('出错了');
  await Promise.resolve('hello world'); // 不会执行
}
let result1 = Async();
console.log(result1);

결과에 따르면 첫 번째 Wait 문의 상태가 Reject로 변경되어 두 번째 Wait 문은 실행되지 않습니다.

3. 비동기 함수의 오류 처리

await 이후 비동기 작업에서 오류가 발생하면 비동기 함수가 반환한 Promise 개체가 거부됩니다.

let a;
async function f() {
    await Promise.reject('error');
    a = await 1; // await 没有执行
}
f().then(v => console.log(a));

결과적으로 async 함수의 wait 중 하나가 Reject 상태로 나타나면 다음 Wait는 실행되지 않습니다. 일반적인 해결책은 try...catch를 사용하는 것입니다.

// 正确的写法
let a;
async function f() {
    try {
        await Promise.reject('error')
    } catch (error) {
        console.log(error);
    }
    a = await 1;
    return a;
}

f().then(v => console.log(a)); // 1

결과에 따르면 실행되지 않는 대기가 여러 개 있는 경우 try...catch에 배치할 수 있어 문제가 매우 잘 해결되었습니다.

4. 결론

async|await의 장점:

• async|await는 콜백 문제를 해결합니다.
• async|await는 동시 실행을 지원합니다.
• async|await는 비동기식에 대해 더 간결합니다. 처리
• async|await는 try...catch

에서 오류를 잡을 수 있습니다.[권장 학습: javascript 고급 튜토리얼]

위 내용은 es6 또는 es7을 기다리고 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!