【Node・JavaScript】async/await(エイシンク・アウェイト)での非同期処理

2022年11月26日2022年11月27日Node

kamiです。
TwitterとYoutubeもやってます。

みなさん非同期通信の知識はありますか？
この記事は非同期通信のasync/await(エイシンク・アウェイト)について聞いたことはあるけど、いまいち非同期処理についてよく分かってない方や、
非同期処理のPromiseについても全く知識がない方へasync/await(エイシンク・アウェイト)についての紹介です。

この記事でわかること

この記事を最後まで読めば「同期通信処理、非同期通信処理」から「async/awaitを使用した非同期処理」までの理解が深まりますので、最後まで読んで「async/await」についてマスターしましょう。

それでは順に見ていきましょう。

1. async/await(エイシンク・アウェイト)での非同期処理の全体の流れ
2. 同期通信とは？
3. 非同期通信とは?
4. Promiseとは
5. asynとは？（アシンク）
6. awaitとは（アウェイト）
7. Promiseとasync/awaitの一覧表
8. Promiseを使用した非同期処理
9. async/awaitを使用した非同期処理
10. まとめ
11. 実装やエラーが解決できない場合

async/await(エイシンク・アウェイト)での非同期処理の全体の流れ

async/await(エイシンク・アウェイト)での非同期処理を行うには次の流れになります。

async関数で非同期処理を行う
await関数でasync関数の処理結果を待つ
await関数でasync関数の処理結果を受け取る

同期通信とは？

同期通信とは

非同期処理の説明の前に同期処理の説明をしなければ話がよく分からなくなるので先に同期処理について説明をします。
同期処理とは、処理を実行中に一つずつ開始した処理の順に処理を行う方法です。
処理が開始され終了して次の処理へ進みます。

問題なさそうだと思いますが、処理の管理量を待っているとどうしても時間がかかってしますので、同期処理だけのアプリケーションは現実的な実用では作られていません。

スポンサードサーチ

非同期通信とは?

非同期通信とは

非同期処理とは、処理を実行中に処理を止めることなく、別の処理を実行できる通信方法を非同期処理と言います。

ajaxを使っての非同期通信

$.ajax({
　　　　type: "POST or GET",
  　　　data: { id: "jquery", name: "ajax" }
　　　　url: path　// endpoint
　})
　.done(function(data){ 
   // 成功 
　})
　.fail(function(jqXHR, textStatus, errorThrown){ 
   // 失敗
　})
　.always(function(data){ 
   // 成功 or 失敗の処理後の処理 
});

非同期処理場合は、実行の順番を待たないため、処理が完了する順序は異なります。

Promiseとは

Promiseとは

Promiseとは、非同期処理の一つで現在ではその中でも新しい記述になります。
以前まではコールバック地獄など言われる記述などもありましたがその非同期処理をコードが見やすく、成功、失敗、取得が分かりやすい非同期通信の記述になります。

clearInterva_example() {
    const promise = new Promise((resolve, reject) => {
        let timerArray = new Array();
        timerArray.push(setInterval(function() {
            if (条件) {
              // 成功
              resolve();
            } else {
              // 失敗
              reject();
            }
        }, 1000));
    });
    promise.then(() => {
        //タイマーを止める
        clearInterval(timerArray.shift());
    });
};

resolve：成功処理
reject：失敗処理
then：Promseの結果
catch：Promise のインスタンスがrejectになったときに呼ばれる

スポンサードサーチ

asynとは？（アシンク）

asyncとは

asyncとは宣言することで非同期関数として実行することができます。
先ほど、promiseが非同期通信の簡単に書く記述と言いましたが、promiseより便利に使えるのがasync関数です。

Promiseを返す
async functionの値がreturnした場合、Promiseの戻り値はresolveする。
syanc functionの結果が例外の場合throwした値をrejectする。

// アロー関数
const Hello = asyncMethod () => {
  // 非同期処理
}
// クラス内の関数
class asyncClass {
  async asyncMethod() {
    // 非同期処理
  }
}

syncとawaitはセットで使います。
処理が完了次第、次の処理を行うことが非同期処理なのでデータベースのINSERTSELECTなどで使います。※裏で処理を行う場合はわざわざ同期通信での処理を行う必要はありません。

awaitとは（アウェイト）

awaitとは

Promiseの結果を返すまで、処理を待機させる
Promiseの結果が返されたらayncの処理が再開する
ayncを待機させてその後、結果を受け取る

awaitを使ったasync関数

async asyncMethodTwo() {
  return 'asyncMethodOneの結果';
}
 
async asyncMethodOne() {
  const result = await asyncMethodTwo();
  return result;
}
 
asyncMethodOne();
// asyncMethodOneの結果

async関数をawaitで結果を取得すると期待通りの結果が返ってきます。

awaitを使わないasync関数

async asyncMethodTwo() {
  return 'asyncMethodOneの結果';
}
 
async asyncMethodOne() {
  const result = asyncMethodTwo();
  return result;
}
 
asyncMethodOne();
// Promise  {'asyncMethodOneの結果'}

awaitを使わないと結果がPromiseで返って出の結果が返ってきます。

スポンサードサーチ

Promiseとasync/awaitの一覧表

Promiseとasync/awaitの一覧表です。

async/await	Promise	詳細
async	Promise()	非同期関数
return	resolve()	非同期関数の処理の成功
throw	reject()	非同期関数の処理のエラー
await	then()	非同期関数の処理を取得

Promiseを使用した非同期処理

Promiseを使用した非同期処理

return new Promise((resolve, reject) => { ... }

function promiseMthod(arg) {
  // Promise を返す
  return new Promise(function(resolve, reject) {
      if (arg == 'promise') {
        // 成功
        resolve('promiseMthodがresolveに入りました')
      } else {
        // 失敗
        reject('promiseMthodがrejectに入りました')
      }
  });
}
// Promise関数の結果を受け取る
promiseMthod('promise').then((result)=> {
  // 成功
  alert(result);
  // promiseMthodがresolveに入りました
}).catch((error)=> {
  // 失敗
  alert(error)
  // promiseMthodがrejectに入りました
 
}

async/awaitを使用した非同期処理

asyncでの非同期処理のパターン

asyncでの非同期処理のパターンです。

// function関数
async function asyncMethod() {
  // 非同期処理
}
// アロー関数
const Hello = asyncMethod () => {
  // 非同期処理
}
// クラス内の関数
class asyncClass {
  async asyncMethod() {
    // 非同期処理
  }
}

const asyncMethod = async () => {
 return 'asyncMethodの結果';
}
 
console.log(asyncMethod())
Promise { asyncMethodの結果 }

console.logで非同期処理の関数を呼び出すと、結果がPromiseで帰ってきてることが分かります。

const asyncMethod = async () => {
 throw new Error('asyncMethodのError結果')
}
 
console.log(asyncMethod())
> Promise {
  <rejected> Error: asyncMethodのError結果

asyncがPromiseを返すし、エラーで非Promiseをその中にラップします。

async/awaitを使用したの非同期処理

const asyncMethodTwo = async (arg) => { 
    const res = await fetch(
        // 処理 
    );
    if (!res.success) {
        throw new Error(res);
    }
    return res; 
};
 
const asyncMethodOne = async (arg) => {
    try {
        const user = await asyncMethodTwo(arg);
    } catch (error) {
        alert(error); 
    } finally {
        console.log('asyncMethodOneの処理終了'); 
    }
};
 
asyncMethodOne('引数');