JavaScriptで非同期を使用する方法

Web アプリケーションが複雑になるにつれて、非同期プログラミングの重要性がますます高まっています。 JavaScript では、async/await キーワードを使用して非同期操作を管理できます。この記事では、async の基本的な使用法を紹介し、理解を助けるためにいくつかの例を示します。

非同期とは何ですか?

async 関数は、ES6 で導入された新しい非同期プログラミング手法です。 async キーワードを使用すると、JavaScript 関数を非同期関数に変えることができ、関数が Promise オブジェクトを返すようになり、非同期操作を処理する際の関数がより簡潔かつ明確になります。非同期関数は、Promise が完了するまで非同期関数の実行を一時停止する await キーワードとともに使用されることがよくあります。

async 関数の構文は次のとおりです。

async function functionName() {
    //异步操作
}

async の使用

async 関数を使用する場合、通常は Promise オブジェクトを組み合わせて使用​​する必要があります。たとえば、リモート データの一部を取得したい場合は、fetch 関数を使用できます。

async function fetchData() {
    const response = await fetch('http://example.com/data');
    const data = await response.json();
    return data;
}

上記のコードでは、fetchData という名前の非同期関数を作成し、fetch 関数を使用してリモート ask を開始します。 。 fetch 関数は非同期操作であるため、await キーワードを使用して Promise オブジェクトの完了を待つ必要があります。構造化代入を使用して、取得したデータを変数 data に格納し、await によって返された Promise が完了した後にそれを返すことができます。

複数の Promise の処理

複数の Promise オブジェクトを処理する必要がある場合は、Promise.all() メソッドを使用できます。 Promise.all() メソッドは、Promise オブジェクトを 1 つの Promise オブジェクトに結合し、すべての Promise オブジェクトが成功した場合に、各 Promise オブジェクトの結果を含む配列を返します。 Promise オブジェクトのいずれかが失敗した場合、このメソッドは失敗した Promise オブジェクトをすぐに返し、未処理の Promise オブジェクトを待つ必要はありません。

たとえば、2 つのリモート データ ソースから同時にデータを取得し、両方を取得した後に操作したい場合は、次のように操作できます。

async function fetchData() {
    const [data1, data2] = await Promise.all([(async () => {
        const response = await fetch('http://example.com/data1');
        return response.json();
    })(), (async () => {
        const response = await fetch('http://example.com/data2');
        return response.json();
    })()]);
    console.log(data1, data2);
}

上記のコードではでは、fetchData という名前の非同期関数を作成し、その中で Promise.all() メソッドを使用して 2 つのリモート データ ソースからのデータを待機しました。自己実行関数と async/await キーワードを使用して 2 つのデータ ソースを取得し、それらを Promise オブジェクトの配列に形成しました。両方のデータ ソースからのデータが完全に解析されたら、それらを変数 data1 と data2 に保存し、コンソール上で簡単なログを作成します。

エラーの処理

非同期関数でエラーを処理するときは、通常、try/catch ステートメントを使用します。 async 関数は Promise オブジェクトを返すため、例外をスローすると、返された Promise オブジェクトは拒否されます。この例外は catch ブロックでキャッチして処理できます。

たとえば、以下に示すように、ネットワーク リクエストが失敗する例外が発生する可能性があります。

async function fetchData() {
    try {
        const response = await fetch('http://example.com/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(error);
    }
}

上記のコードでは、fetchData という名前の非同期関数を作成し、try/catch ステートメントを使用してネットワークリクエストが失敗した場合に例外を処理します。リクエストが成功した場合は、データを変数 data に格納して返します。それ以外の場合は、エラーをコンソールに出力します。

結論

async/await キーワードは、JavaScript が非同期プログラミングを管理するための便利な方法です。 async/await を使用すると、コードがクリーンになり、読みやすく理解しやすくなります。複数の非同期操作を管理したりエラーを処理する必要がある場合は、Promise ステートメントと try/catch ステートメントを使用してこれを実現することもできます。この記事がお役に立てば幸いです!

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