ホームページ > 記事 > ウェブフロントエンド > JavaScriptで非同期処理を行うasyncとawaitの使い方
Async/await は Promise の非同期処理をより簡潔かつ効率的に記述できるメイン関数です 非同期処理は、処理結果を待たずにすぐに次の処理を実行できる仕組みです。Promise を利用することで簡単に実装できます。 。
Promiseの場合はthenを使って接続するので非常に単調なコードになります。
たとえば、「then」を使用して複数の Promise プロセスを実行する場合、次のようになります:
getDate() .then(function(data) { return getYear(data) }) .then(function(year) { return getSomething(year) }) .then(function(item) { getAnotherThing(item) })
場合によっては、Promise.all() を使用する方がよい場合もありますが、その場合はまだ使用する必要があります。
async/await の使い方を学べば効率が向上します。
async/await を使用するにはどうすればよいですか?
まずは基本的な構文を見てみましょう
asyncは関数を定義することができ、関数の前に書くだけで非同期処理を行うことができます。
async function() { }
このように async を書くと、この関数は Promise を返します。
また、await は Promise の処理結果が返ってくる前に一時停止する演算子です。
await Promise处理
Promise の処理を記述する関数の前に await を記述するだけで、結果が返されるまで一時停止します。
ただし、await は async で定義された関数にのみ使用できることに注意してください。
このため、async / await はペアで使用されることがよくあります。
async/awaitを使った非同期処理の書き方は?
まず、次のようなPromise処理を想定します。
function myPromise(num) { return new Promise(function(resolve) { setTimeout(function() { resolve(num * num) }, 3000) }) }
この例では、意図的に3秒かかる処理がPromiseに記録されていることが分かります。
then を使用せずに async/await を使用する場合は次のようになります。
async function myAsync() { var result = await myPromise(10); console.log(result); }
実行結果は100
この例では、asyncを割り当てて非同期処理関数を作成しています。
関数内の Promise 処理が myPromise() の前に待機するという説明
これは一時的に Promise 処理を待機し、3 秒後に結果が返され、結果が取得されたら、処理は続行されます。
実行結果は、指定したパラメータ10を乗算した値100が得られます。
以上がJavaScriptで非同期処理を行うasyncとawaitの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。