JS의 비동기/대기

이번에는 JS에서 async/await에 대해 다루겠습니다. JS에서 async/await를 사용할 때 주의사항은 무엇인가요?

JS의 비동기 작업은 초기 콜백 함수에서 Promise, 그리고 Generator로 발전했으며, 이 모든 것은 점진적인 개선입니다. 비동기 함수의 출현으로 비동기 솔루션이 동기로 작성되는 것처럼 보입니다. 방법.

async 함수에 대한 간략한 설명은 Generator 함수의 설탕 문법입니다.

제너레이터 함수 작성 방법

let promise = function (val){    return new Promise(function (resolve, reject){
        setTimeout(()=>{            console.log(val);
            resolve(val);
        },1000);
    });
};let gen = function* (){    let p1 = yield promise('1');    let p2 = yield promise('2');
};let genF = gen();

비동기 함수 작성 방법

let promise = function (val){    return new Promise(function (resolve, reject){
        setTimeout(()=>{            console.log(val);
            resolve(val);
        },1000);
    });
};let gen = async function (){    let p1 = await promise('1');    let p2 = await promise('2');
};

비동기 함수는 제너레이터 함수를 개선한 것으로 구문상 제너레이터 함수의 별표를 async로 바꾸고, Yield를 대신합니다. 기다려서.
그리고 async는 Generator 함수와도 다릅니다.

내장 실행기가 함께 제공되며 Generator 함수는 실행기에 의존해야 하며 async는 일반 함수와 동일할 수 있으며 단 한 줄만 필요합니다

Generator 함수에 비해 async 및 Wait의 의미가 더 명확합니다

적용 가능 매우 유연합니다. 항복 후에는 Thunk 함수와 Promise 객체만 가능하고, Wait 후에는 Promise 객체와 기본 유형 값(숫자)이 가능합니다. value, string, Boolean 등)

async 함수

비동기 함수에 대한 기대는 비동기 작업 문제를 해결하는 데 도움이 되기를 바라므로 비동기 함수의 반환 값이 무엇인지 알아내야 합니다. 기능 입니다.

async function asyncAwait() {    return 'async await';
}let a = asyncAwait();console.log(a);

결과 출력:

Promise {<resolved>: "async await"}

async 함수가 Promise 객체를 반환하는 것을 볼 수 있습니다. 함수에 직접 값이 반환되면 비동기 함수는 반환이 없으면 Promise 객체로 캡슐화되어 반환됩니다. 값이 없으면 비동기 함수는 정의되지 않은

Promise {<resolved>: undefined}

을 반환합니다. 대기와 결합되지 않으면 비동기 함수가 즉시 실행되어 Promise 객체를 반환합니다.

await wait

await는 operator이며, wait의 결과는 Promise 객체 또는 다음과 같은 다른 값입니다. wait의 결과, 기다리는 것이 Promise 객체가 아닌 경우 작업의 결과는 기다리는 것입니다.

그리고 Promise 객체를 기다리는 경우 다음 코드를 차단하고 Promise 객체가 해결한 다음 표현식의 결과로 해결 값을 가져옵니다.

비동기 함수 호출은 Promise에 캡슐화되므로 비동기 함수에서 대기를 사용해야 합니다.

async/await 체인 처리

여러 비동기 작업의 경우 Promise는 다중 계층 콜백 문제를 해결할 수 있습니다.

function func1() {    return 'async';
}async function func2() {    return Promise.resolve('await');
}async function asyncAwait() {    let f1 = await func1();    let f2 = await func2();    console.log(f1, f2);
}
asyncAwait()

submit();

async 함수 구현:

function ajax(t) {    return new Promise(resolve => {
        setTimeout(() => resolve(t + 200), t);
    });
}function step1(t) {    console.log(`step1 in ${t}ms`);    return ajax(t);
}function step2(t) {    console.log(`step2 in ${t}ms`);    return ajax(t);
}function step3(t) {    console.log(`step3 in ${t}ms`);    return ajax(t);
}function submit(){    console.time('submit');
    step1(200)
        .then(time2 => step2(time2))
        .then(time3 => step3(time3))
        .then(result => {            console.log(`result is ${result}ms`);            console.timeEnd("submit");
        });
}

결과 출력:

function ajax(t) {    return new Promise(resolve => {
        setTimeout(() => resolve(t + 200), t);
    });
}function step1(t) {    console.log(`step1 in ${t}ms`);    return ajax(t);
}function step2(t) {    console.log(`step2 in ${t}ms`);    return ajax(t);
}function step3(t) {    console.log(`step3 in ${t}ms`);    return ajax(t);
}async function submit(){    console.time('submit');    const t1 = 200;    const t2 = await step1(t1);    const t3 = await step2(t2);    const result = await step3(t3);    console.log(`result is ${result}`);    console.timeEnd('submit');
}
submit();

그리고 요구사항이 변경되면 각 단계의 매개변수는 이전 단계의 결과가 되며 비동기 함수는 다음과 같이 작성할 수 있습니다.

step1 in 200ms
step2 in 400ms
step3 in 600ms
result is 800submit: 1209.85107421875ms

결과 출력:

function ajax(t) {    return new Promise(resolve => {
        setTimeout(() => resolve(t + 200), t);
    });
}function step1(t1) {    console.log(`step1 in ${t1}ms`);    return ajax(t1);
}function step2(t1, t2) {    console.log(`step2 in ${t1}ms,${t2}ms`);    return ajax(t1 + t2);
}function step3(t1, t2, t3) {    console.log(`step3 in ${t1}ms,${t2}ms,${t3}ms`);    return ajax(t1 + t2 + t3);
}async function submit(){    console.time('submit');    const t1 = 200;    const t2 = await step1(t1);    const t3 = await step2(t1, t2);    const result = await step3(t1, t2, t3);    console.log(`result is ${result}`);    console.timeEnd('submit');
}
submit();

Async/await는 note

async를 가리켜 패키지의 내용이 동기적으로 실행될 수 있음을 선언하는 데 사용되며, Wait는 Wait가 실행될 때마다 코드 실행을 제어합니다. 차단되어 대기 반환 값을 기다린 다음 실행 후 대기합니다.

await 이후에 호출되는 함수는 약속을 반환해야 합니다.

await는 비동기 함수에서만 사용할 수 있으며 일반 함수에서 사용하면 오류가 보고됩니다.

await 명령 뒤에 있는 Promise 개체가 거부될 수 있으므로 try...catch 코드 블록에 wait 명령을 넣는 것이 가장 좋습니다.

async/await try/catch 작성 방법

step1 in 200ms
step2 in 200ms,400ms
step3 in 200ms,400ms,800ms
result is 1600submit: 2210.47998046875ms

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

React.js의 Mixins.js 사용법에 대한 자세한 설명

React.js의 CSS 사용법

위 내용은 JS의 비동기/대기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!