非同期/待機構文

async/await は、JavaScript で非同期操作を処理するための構文です。これにより、Promise の使用が簡素化され、非同期コードの読み書きが容易になります。

具体的には、 async/awaitは、 function の前にキーワードを追加することでasync非同期関数を宣言します。このawaitキーワードを関数内で使用して、Promise オブジェクトの解決を待つことができます。キーワードが検出されるとawait、関数は Promise オブジェクトの状態が解決 (分析) または拒否 (拒否) になるまで実行を一時停止し、その後後続のコードの実行を続けます。キーワードを使用すると、awaitコールバック地獄 (コールバック地獄) の問題を回避でき、非同期コードがより明確で読みやすくなります。

ケース

ケースその1

以下は、async/await を使用して非同期操作を処理する方法を示すサンプルコードです。

// 定义一个异步函数
async function fetchData() {
    
    
  try {
    
    
    // 使用 await 关键字等待一个 Promise 对象的解析
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    
    
    console.error('Error:', error);
  }
}

// 调用异步函数
fetchData();

上記のコードでは、fetchData関数はawaitキーワードを使用してfetch、メソッドによって返される Promise オブジェクトの解決を待機します。response.json()Promise オブジェクトが解決されると、メソッドを通じて応答の JSON データを取得できます。エラーが発生した場合は、catchブロックによって例外をキャッチして処理できます。

ケース2

以下は、async/await を使用して非同期操作を処理するサンプルコードです。

// 异步函数，模拟从 API 获取用户信息
async function getUserInfo(userId) {
    
    
  try {
    
    
    // 发起网络请求，获取用户信息
    const response = await fetch(`https://api.example.com/users/${
      
      userId}`);
    // 检查网络请求的状态码
    if (!response.ok) {
    
    
      throw new Error('Failed to get user info');
    }
    
    // 解析响应的 JSON 数据
    const data = await response.json();
    
    // 返回用户信息
    return data;
  } catch (error) {
    
    
    console.error('Error:', error);
    throw new Error('Failed to get user info');
  }
}

// 异步函数，模拟从 API 获取用户的订单信息
async function getUserOrders(userId) {
    
    
  try {
    
    
    // 发起网络请求，获取用户订单信息
    const response = await fetch(`https://api.example.com/users/${
      
      userId}/orders`);
    
    // 检查网络请求的状态码
    if (!response.ok) {
    
    
      throw new Error('Failed to get user orders');
    }
    
    // 解析响应的 JSON 数据
    const data = await response.json();
    
    // 返回用户订单信息
    return data;
  } catch (error) {
    
    
    console.error('Error:', error);
    throw new Error('Failed to get user orders');
  }
}

// 主函数，调用异步函数并处理结果
async function main() {
    
    
  try {
    
    
    const userId = 123;
    
    // 调用 getUserInfo 函数获取用户信息
    const userInfo = await getUserInfo(userId);
    console.log('User Info:', userInfo);
    
    // 调用 getUserOrders 函数获取用户订单信息
    const userOrders = await getUserOrders(userId);
    console.log('User Orders:', userOrders);
  } catch (error) {
    
    
    console.error('Error:', error);
  }
}

// 调用主函数
main();

async 関数内に、ネットワークリクエストのステータスコードのチェックを追加しました。ステータスコードが 200 でない場合、リクエストは失敗し、エラーがスローされます。
catchcatchブロックでは、エラーメッセージを出力し、新しいエラーを再スローします。そうすることで、より具体的なエラー情報が提供され、上位の呼び出し元にエラーを渡すことができます。
getUserInfomain 関数では、および関数を呼び出しgetUserOrders、awaitキーワードを使用してその結果を待ちます。エラーが発生した場合は、エラーメッセージが出力されます。

上記のコードを実行すると考えられる結果は次のとおりです。

User Info: { id: 123, name: 'John Doe', email: '[email protected]' }
User Orders: [ { id: 1, product: 'Product A', price: 10 }, { id: 2, product: 'Product B', price: 20 } ]

この結果を次のように解釈します。

まず、getUserInfoユーザー情報を取得する関数を呼び出します。この例では、ユーザーの ID が 123 であると仮定します。idAPI 応答に従って、ユーザーの情報は、nameおよびプロパティを含むオブジェクトに解析されますemail。したがって、User Info結果はです{ id: 123, name: 'John Doe', email: '[email protected]' }。
次に、getUserOrders関数を呼び出してユーザーの注文情報を取得します。もう一度、ユーザーの ID が 123 であると仮定します。API 応答に従って、ユーザーの注文情報は複数の注文オブジェクトを含む配列に解析されます。各注文オブジェクトにはid、productおよびpriceプロパティがあります。したがって、User Orders結果は order オブジェクトを含む配列になります: [ { id: 1, product: 'Product A', price: 10 }, { id: 2, product: 'Product B', price: 20 } ]。

要約する

async/await を使用すると、非同期コードがより簡潔になり、理解しやすくなります。その利点は次のとおりです。

より直感的なコードフロー:awaitキーワードを使用することで、コード実行フローが同期コードに近くなり、理解しやすく、デバッグしやすくなります。
エラー処理の簡素化:try/catchブロックを使用して非同期操作のエラーをキャッチできるため、エラー処理がより直観的かつ簡単になります。
同期プログラミングスタイルの使用が可能: async/await を使用すると、複数の層のコールバック関数をネストすることなく、同期コードと同様のプログラミングスタイルを使用できます。

つまり、async/await は JavaScript で非同期操作を処理する洗練された方法であり、これにより非同期コードの作成と保守が容易になり、コードの可読性と保守性が向上します。