非同期の使い方

async/awaitは、より読みやすく明確な非同期操作を処理する最新の方法です。asyncおよびawaitは両方とも JavaScript ES2017 (または ES8) の新機能です。これらの使用方法の概要を次に示します。

非同期

関数宣言の前にキーワードを追加するとasync、関数の結果が自動的に Promise に変換されます。これは、.then()メソッドと.catch()メソッドを使用して、他の Promise と同じようにこの関数の結果を処理できることを意味します。

async function hello() {
    
    
    return "Hello!";
}

hello().then((message) => console.log(message)); // 输出 "Hello!"

待つ

awaitこのキーワードはasync関数内でのみ使用でき、Promise が満たされて結果が返されるまで関数の実行を一時停止します。

function resolveAfter2Seconds() {
    
    
    return new Promise(resolve => {
    
    
        setTimeout(() => {
    
    
            resolve('resolved');
        }, 2000);
    });
}

async function asyncCall() {
    
    
    console.log('calling');
    const result = await resolveAfter2Seconds();
    console.log(result);
}

asyncCall();

// 输出:
// calling
// (等待 2 秒)
// resolved

エラー処理

を使用する場合async/await、エラー処理は通常 try/catch ステートメントによって行われます。

async function fetchUserData(userId) {
    
    
    try {
    
    
        let response = await fetch(`https://api.example.com/user/${
      
      userId}`);
        let data = await response.json();
        return data;
    } catch (error) {
    
    
        console.error("There was an error fetching the user data:", error);
    }
}

要約する

• キーワードを使用すると、async関数は常に Promise を返すようになります。
• awaitこのキーワードを使用すると、Promise が満たされるまで非同期関数の実行を「一時停止」し、スレッド全体や呼び出しスタック全体をブロックすることなく後続のコードの実行を継続できます。
• を使用すると、async/await非同期コードを同期コードに似せて、可読性を向上させることができます。
• 考えられるエラーを処理するには、呼び出しをtry/catchステートメントで囲みますawait。