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();

async関数の書き方

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関数はGenerator関数を改良したもので、構文上、Generator関数のアスタリスクがasyncに、yieldが置き換えられています。待ってください。

そして、async は Generator 関数とも異なります:

組み込みのエグゼキュータが付属しており、Generator 関数はエグゼキュータに依存する必要があり、async は通常の関数と同じにすることができ、必要な行は 1 行だけです

Generator関数と比較すると、asyncとawaitのセマンティクスが明確です

適用可能です。yield後はThunk関数とPromiseオブジェクトのみ、await後はPromiseオブジェクトとプリミティブ型の値(数値)が可能です。値、

文字列

、ブール値など)async関数

async関数に期待されているのは、非同期操作の問題の解決に役立つことを期待しているため、async関数の戻り値が何であるかを理解する必要があることです。

機能

です。

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

結果出力:

Promise {<resolved>: "async await"}

関数内で直接値が返された場合、async 関数は Promise オブジェクトにカプセル化されて返されることがわかります。値を指定すると、async 関数は未定義を返します

Promise {<resolved>: undefined}

await と組み合わせない場合、async 関数はすぐに実行され、Promise オブジェクトを返します。

await wait

await は

operator

であり、wait の結果は次のような 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()

結果出力:

async await

await

式の操作

wait の結果に依存します。待機しているものが Promise オブジェクトでない場合、操作の結果が待機しています。 そして、Promise オブジェクトを待機している場合は、次のコードをブロックし、Promise を待ちます解決するオブジェクトを取得し、式の結果として解決値を取得します。 非同期関数の呼び出しは Promise にカプセル化されるため、非同期関数では await を使用する必要があります。

async/await チェーン処理

複数の非同期操作の場合、Promise は多層コールバックの問題を解決できます。

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");
        });
}

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);
}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();

結果出力:

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

Async/await の注意点

async は、パッケージ内のコンテンツが同期的に実行できることを宣言するために使用され、await は await が実行されるたびに実行シーケンスを制御します。実行はブロックされ、await 戻り値を待機し、実行後に待機します。

await の後に呼び出される関数は Promise を返す必要があります。

await は非同期関数でのみ使用できます。通常の関数で使用するとエラーが報告されます。

await コマンドの背後にある Promise オブジェクトは拒否される可能性があるため、await コマンドを try...catch コード ブロックに配置することが最善です。

async/await try/catch の書き方

async function asyncAwait() {    try {        await promise();
    } catch (err) {        console.log(err);
    }
}// 另一种写法async function asyncAwait() {    await promise().catch(function (err){        console.log(err);
    });
}

この記事の事例を読んで、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

React.js での Mixins.js の使用法の詳細な説明

React.js での CSS の使用法

以上がJSの非同期/待機の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。