vueでのawaitの使い方は何ですか?

vue では、await は待機を意味します。await キーワードは、async 関数内にのみ配置できます。async とともに await を使用することは、非同期関数を同期関数に変えることと同じです。await は次の式を待ちます。次のステップは結果が返された後にのみ実行されます。

この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

vue での await の使用法とは何ですか

まず async の使用法について話しましょう. async は、関数が非同期関数であることを示すキーワードとして関数の前に置かれます。 async は 非同期 を意味するため、非同期関数は、関数の実行が次のコードの実行をブロックしないことを意味します。非同期関数を作成する

async function timeout() {
　　return 'hello world';
}

構文は非常に簡単です。関数の前に async キーワードを追加して、関数が非同期であることを示すだけです。呼び出し方法は? async 関数も関数です。通常の関数の使用方法と同じように使用できます。括弧を使用して直接呼び出すだけです。背後のコードの実行をブロックしないことを示すために、

という文を追加します。非同期関数呼び出し後の

console.log;
async function timeout() {
    return 'hello world'
}
timeout();
console.log('虽然在后面，但是我先执行');

開く ブラウザ コンソールに

非同期関数のタイムアウトが呼び出されていますが、出力はありません。「hello world」は返されません。心配しないでください。 、 timeout() の実行が何を返すか見てみましょう。上記の timeout() ステートメントを console.log(timeout())

async function timeout() {
    return 'hello world'
}
console.log(timeout());
console.log('虽然在后面，但是我先执行');

に変更します。引き続きコンソールを確認します。

非同期関数は Promise オブジェクトを返します。Promise の戻り値を取得したい場合は、then メソッドを使用してコードの変更を続ける必要があります。

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('虽然在后面，但是我先执行');

コンソールを見てください

## 「hello world」が表示されます。同時に、タイムアウトの実行によって次のコードの実行がブロックされることはありません。これは、先ほど述べたことと一致します。

現時点では、次のことを行うことができます。コンソールの Promise には、非同期関数の内部実装である解決済みのメソッドがあることに注意してください。非同期関数に値が返された場合、関数が呼び出されたときに、Promise.solve() メソッドが内部的に呼び出されます。戻り値として Promise オブジェクトに変換しますが、タイムアウト関数の内部でエラーがスローされた場合はどうなりますか? その後、 Promise.reject() が呼び出され、Promise オブジェクトが返され、タイムアウト関数

async function timeout(flag) {
    if (flag) {
        return 'hello world'
    } else {
        throw 'my god, failure'
    }
}
console.log(timeout(true))  // 调用Promise.resolve() 返回promise 对象。
console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。

## が変更されます。 # コンソールは次のとおりです:

関数内でエラーがスローされた場合、オブジェクトにはキャプチャ用の catch メソッドがあります。キーワードがもうすぐ完成します。もう一度 await キーワードを考えてみましょう。await は待つことを意味します。では、何を待つのでしょうか? そしてその後に何が続くのでしょうか? 実際、この後に任意の式を置くことができますが、次のような式を置く可能性が高くなります。 Promise オブジェクトを返します。await キーワードは非同期関数にのみ配置できることに注意してください。

ここで関数を作成し、Promise オブジェクトを返させます。この関数は、2 秒後に値を 2 で乗算するものです

timeout(false).catch(err => {
    console.log(err)
})

// 2s 之后返回双倍的值

次に、await キーワードを使用できるように、非同期関数を作成します。await の後に配置されるのは、Promise オブジェクトを返す式なので、その後に DoubleAfter2秒関数呼び出し

function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}

を記述できます。コンソールを開くと、2 秒後に 60 が出力されます。

次に、testResult 関数を呼び出して、await、await 表現などに遭遇するコードの実行プロセスを見てみましょう。ここで一時停止し、下方向への実行は行われません。何を待っていますか?後続の Promise オブジェクトの実行が完了するまで待機し、Promise Resolve の値を取得して戻ります。戻り値を取得した後、下方向への実行を継続します。私たちのコードに特有のことですが、await が発生した後、コードは実行を一時停止し、doubleAfter2秒(30) が実行を完了するまで待機します。doubleAfter2秒(30) によって返された Promise が実行を開始します。2 秒後、Promise は解決され、値 60 を返します。このとき、await は戻り値 60 を取得し、それを result に代入し、一時停止が終了した後、コードは実行を継続し始め、console.log ステートメントを実行します。

この関数では、async/await の役割が見えないかもしれませんが、3 つの数値の値を計算して、得られた値を出力したい場合はどうすればよいでしょうか?

async function testResult() {
    let result = await doubleAfter2seconds(30);
    console.log(result);
}
testResult();

6 秒後、コンソールは 220 を出力します。非同期コードの作成は同期コードの作成とまったく同じであり、コールバック領域がなくなっていることがわかります。

注:

async と await は Promise に基づいています。 async を使用する関数は常に Promise オブジェクトを返します。これは間違いを犯しやすい場所である可能性があることを覚えておくことが重要です。

await を使用すると、コード全体ではなく関数が一時停止されます。

async と await はノンブロッキングです。

Promise.all() などの Promise は引き続き使用できます。

[関連する推奨事項:「

vue.js チュートリアル

」]

以上がvueでのawaitの使い方は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。