SCRAWLED TECH BLOG

当サイトは、アフィリエイト広告を利用しています

【javascript】async~awaitの基本と使い方

作成日：2025月08月02日
更新日：2025年08月22日

asyncとは

非同期関数を定義する関数定義で関数の前につける。 asyncをつけた関数は Promiseインスタンスを返却するようになる

Promiseについては下記記事でまとめている

asyncとPromise

  • async関数内でのreturn は「return new Promise」 して 「resolve」するのと同義
    つまり　async functionが値をreturnした場合、Promiseは戻り値をresolveする。
  • async関数内でのthrow は「return new Promise」 して 「reject」するのと同義
    async functionが例外や何らかの値をthrowした場合はその値をrejectする。

Promiseとasyncの比較（下記の２つは同義）

Promiseで関数を作った場合とasyncで関数を作って場合を比較する。

index.js
//asyncを使ったver
const asyncFunc = async (value) => value;


// 通常関数で Promise を返却する
const promiceFunc = async (value) =>
  new Promise((resolve, reject) => {
    resolve(value);
  });


asyncFunc(1).then((val) => console.log(val)); //1
promiceFunc(1).then((val) => console.log(val)); //1

asyncFunc中でreturn されたとき、戻り値で Promise.resolve する
要するにaync関数内でreturnするとresolve（）してるとの同義
だから呼び出し元でthen()で繋げられる

aysnc function の中で throw

async function で定義された関数内で throw された場合、
そのthrow の値でPromise.reject が実行される。
要するにthrow new Errorするとreject()してるとの同義。
呼び出し元でcatchできる

index.js
//asyncを使ったver
const asyncFunc = async (value) => {
  if (value > 100) {
    return "OK";
  } else {
    // throw
    throw new Error("NG");
  }
};


// 通常関数で Promise を返却する
const promiceFunc = async (value) =>
  new Promise((resolve, reject) => {
    if (value > 100) {
      resolve("OK");
    } else {
      reject("NG");
    }
  });


// catch() で例外処理を行える
asyncFunc(1).catch((error) => console.log(error.message));//NG
promiceFunc(1).catch((error) => console.log(error));//NG

async要点

  • asyncを付ける戻り値がPromiseになる。
  • 内部でやっていることはPromiseと同じだがより簡単にかける　　
  • 外部からasync関数を使う時は戻り値がPromiseで帰ってくることに気をつける

awaitとは

awaitはasyncとセットで使う。

  • awaitはasync関数の中でしか書けない。
  • await 式を利用すると、指定した Promise の結果が返されるまで処理を待機する。
  • そのためawaitをつける処理はpromiseを返す処理である必要がある
  • そのためawaitをつける処理は必然的に非同期処理になる。

awaitがなかった場合

まずはawaitなしで書いてみる

index.js
// setTimeout を Promise でラップ
const wait = (ms) =>
  new Promise((resolve) =>
    setTimeout(() => resolve(console.log("resolve")), ms)
  );


// async
const awaitFunc = async () => {
  console.log(1);
  wait(3000);
  console.log(2);
};


awaitFunc();

実行すると

log
1
2
resolve

wait処理は非同期のため1,2の方が先に実行されてしまう。

awaitを付けた場合

wait関数にawaitを付ける。
※wait関数はawaitを付けるためにPromiseでラップしている

index.js
// setTimeout を Promise でラップ
const wait = (ms) =>
  new Promise((resolve) =>
    setTimeout(() => resolve(console.log("resolve")), ms)
  );


// async
const awaitFunc = async () => {
  console.log(1);
  await wait(3000); // Promise が返ってくるまで awaitで 処理停止
  console.log(2); // 約3秒経過に表示
};


awaitFunc();


// 実行結果
// 1
// resolve 
// 2

awaitをつけることによってwait関数の実行を待ってから処理できている

await要点

  • asyncとセットで使うことで非同期の処理を待つことができる。
  • async関数内部でしか書けない
  • async関数にしか付けられない

awaitの詳しい挙動について下記でまとめた

エラーハンドリングについて

Promiseとasync/awaitを使用した時のエラーハンドリングパターンについて
まとめる。

async/awaitのエラーハンドリング

async/awaitを組み合わせたエラーハンドリングパターン

await/catchパターン

errorPromise関数が正常に終了した場合はerrorPromise関数でresolveした
値がresultに入り、errorが発生した場合はcatchした値がresultに入る

index.js
// エラープロミス関数
const errorPromise = () => {
  return new Promise((resolve, reject) => {
    try {
      //エラー発生させる
      throw new Error("Some error occured");


    } catch (err) {
      //エラーが発生してるのでrejectが返却される
      reject(err);
    }
  });
};


const asyncFuncNoTryCatch = async () => {
  　//errorPromise関数を実行
    //errorPromise関数でerrorをthrowするためresultには値は入らない
    const result = await errorPromise()
      .catch(err => console.log(err))
    console.log(result)
  }


asyncFuncNoTryCatch() // Some error occured

try~catchパターン

errorPromise関数をasync無名関数でラップし
async無名関数内でtry~catchしてエラーハンドリングする

index.js
// エラープロミス関数
const errorPromise = () => {
  return new Promise((resolve, reject) => {
    try {
      //エラー発生させる


      throw new Error("Some error occured");
    } catch (err) {
      //エラーが発生してるのでrejectが返却される
      reject(err);
    }
  });
};


//async無名関数でラップ
const asyncFuncTryCatch = async () => {
  try {
    //errorPromise関数を実行
    const result = await errorPromise()
    console.log(result) // unreachable(到達不能)
  } catch (err) {
    //エラーハンドリング
    console.log(err)
  }
}


asyncFuncTryCatch() // log. Some error occured

こっちの方をよく使う。

まとめ

javascriptのasyncとawaitをまとめてみた。
jsを使う仕事をしている時は当たり前すぎて、気にもとめていないが
しばらく使わないと忘れるので忘備録として残す

参考資料

新着記事

タグ別一覧
top