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

【javascript】awaitが効かないパターン

作成日：2025月08月09日

更新日：2025年08月22日

javascriptの非同期処理でよく使うasync~awaitのawaitについて
正常に動作するときとしない時があるのでサンプルを書いて確認した。

結論をまとめると下記だった

awaitはasync関数にしかつけられない。
awaitはasync関数内でしか書けない → 構文エラーになる
awaitを付けたasync関数内で非同期処理をする場合は合わせてawaitを付ける必要がある → つけないとawaitが効かなくなる。
awaitを付けた関数は値をPromiseで返す必要がある → つけないとawaitがきかない
- axiosやfetchAPIは元々、Promiseなので問題ない
- settimeoutやxmlHttpRequestはPromiseでないので new Promise()して返す必要がある。

それぞれ確認していく

async~awaitの基本的な使い方については下記でまとめている

awaitを設定した関数はPromise型で返す必要がある。

wait関数の戻り値をPromise型にしなかった場合
asyncをつけていてもawaitは効かない

index.js


// async関数にするがPromise型で返さない
const wait = async (ms) => {
  setTimeout(() => (console.log("await")), ms);
};

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

awaitFunc();

// 実行結果
// 1
// 2
// await

Promise型で返却した場合はawaitが効く

index.js


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

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

awaitFunc();

// 実行結果
// 1
// await 
// 2

fetchAPIを使うパターン

fetchAPIは結果がPromiseで帰ってくるため、明示的にnew Promiseする必要はない。

index.js


const fech = async () => {
  // awaitする
  const result = await fetch("https://jsonplaceholder.typicode.com/todos/1", {
    method: "GET"
  })
    .then((response) => {
      if (response.ok) {
        // jsonに変換する
        return response.json();
      } else {
        // reject
        throw new Error(response.status);
      }
    })
    // rejectの結果を処理
    .catch((status) => console.log(status));
    console.log(result);　//fetch処理が終了後に実行される
    console.log("111");

};

fech();

// 実行結果
// {userId: 1, id: 1, title: "delectus aut autem", completed: false}
// 111

awaitをけした場合はfetch処理のPromiseが解決される前にlog出力されるため
実行結果は下記のようになる

log


Promise {<pending>}
111

axiosを使うパターン

axiosもfechAPIと同様に結果がPromiseで帰ってくるため、明示的にnew Promiseする必要はない。

index.js


import axios from "axios";

const axiosSampleFunc = async () => {
  const result = await axios.request({
    method: "GET",
    url: "https://jsonplaceholder.typicode.com/todos/1",
  })
  // .then(res=>res.data)
  .catch((error)=>error.message)

  console.log(JSON.stringify(result.data,null,2));
  console.log(1111);

};

axiosSampleFunc()

// 実行結果
// {
//   "userId": 1,
//   "id": 1,
//   "title": "delectus aut autem",
//   "completed": false
// } 
// 1111

awaitを消した場合はaxios処理のPromiseが解決される前にlog出力されるため
実行結果は下記のようになる

log


undefined
1111

XMLHttpRequestを使う場合

XMLHttpRequestでawaitを使う場合は、結果がPromiseではかえって来ないため
new Promiseする必要がある

Promiseで返却するパターン

XMLHttpRequestを実行する関数の戻り値をPromiseにした場合
awaitが有効になる

index.js


// Promise
const promiseFunc = async () => {
  // 戻り値をPromiseで取得する
  return new Promise((resolve, reject) => {
    // オブジェクト生成
    let xmlHttpRequest = new XMLHttpRequest();
    // responseTypeを設定（受け取る型）
    xmlHttpRequest.responseType = "json";

    // onloadイベントでリクエストの状況を監視
    xmlHttpRequest.onload = (e) => {
      if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 201) {
        resolve(xmlHttpRequest.response);
      } else {
        reject(xmlHttpRequest.status);
      }
    };

    // アクセス方法とパスを設定
    // アクセス方法
    // パス
    // true:非同期、false:同期
    xmlHttpRequest.open(
      "POST",
      "https://jsonplaceholder.typicode.com/todos",
      true
    );

    // サーバに対して解析方法を指定する
    xmlHttpRequest.setRequestHeader(
      "Content-Type",
      "application/json; charset=UTF-8"
    );

    // 送るデータ
    const sendData = {
      userId: 1,
      id: 1,
      title: "delectus aut autem",
      completed: false
    };

    // 通信実行
    xmlHttpRequest.send(JSON.stringify(sendData));
  });
};

// 実行
const asyncFunc = async () => {
  const result = await promiseFunc();
  console.log(result);
  console.log("aaa");
};

asyncFunc()

// 実行結果
// {userId: 1, id: 201, title: "delectus aut autem", completed: false}
// aaa

戻り値をPromiseで返さない場合

Promiseで返さないとawaitが効かない

index.js


// Promise
const promiseFunc = async () => {
  // 戻り値をPromiseで取得する
  // オブジェクト生成
  let xmlHttpRequest = new XMLHttpRequest();
  // responseTypeを設定（受け取る型）
  xmlHttpRequest.responseType = "json";

  // onloadイベントでリクエストの状況を監視
  xmlHttpRequest.onload = (e) => {
    if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 201) {
      return xmlHttpRequest.response;
    } else {
      return xmlHttpRequest.status;
    }
  };

  // アクセス方法とパスを設定
  // アクセス方法
  // パス
  // true:非同期、false:同期
  xmlHttpRequest.open(
    "POST",
    "https://jsonplaceholder.typicode.com/todos",
    true
  );

  // サーバに対して解析方法を指定する
  xmlHttpRequest.setRequestHeader(
    "Content-Type",
    "application/json; charset=UTF-8"
  );

  // 送るデータ
  const sendData = {
    userId: 1,
    id: 1,
    title: "delectus aut autem",
    completed: false
  };

  // 通信実行
  xmlHttpRequest.send(JSON.stringify(sendData));
};

// 実行
const asyncFunc = async () => {
  const result = await promiseFunc();
  console.log(result);
  console.log("aaa");
};

asyncFunc();

// 実行結果
// undefined
// aaa

awaitしているasync関数内で別の非同期処理を呼んでいる場合

awaitを使う場合は、awaitしている関数内で使っている別の非同期処理も
awaitしていないawaitが効かなくなる。

awaitが有効

awaitしているasync関数（waitRap）内で呼んでいる
async関数(wait)でもawaitしている場合は正常にawaitする

index.js


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

//waitをさらにラップしてさらにwaitを呼ぶ
const waitRap = async(min,count)=>{
  // さらに非同期処理を呼ぶ
  await wait(min,count);
}

// async
const awaitFunc = async () => {
  console.log(1);
  await wait(3000,2); // Promise が返ってくるまで awaitで 処理停止
  console.log(3); // 約3秒経過に表示
  await waitRap(3000,4) //ラップ関数を実行
  console.log(5);

};

awaitFunc();
console.log(6); //async関数外なので処理を待たない

// 実行結果
// 1
// 6
// 2
// 3
// 4
// 5

awaitが無効

waitRap内のawaitを消すと、awaitしなくなる

index.js


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

//waitをさらにラップしてさらにwaitを呼ぶ
const waitRap = async(min,count)=>{
  // さらに非同期処理を呼ぶ
  // awaitを消す
  wait(min,count);
}

// async
const awaitFunc = async () => {
  console.log(1);
  await wait(3000,2); // Promise が返ってくるまで awaitで 処理停止
  console.log(3); // 約3秒経過に表示
  await waitRap(3000,4) //ラップ関数を実行
  console.log(5);

};

awaitFunc();
console.log(6); //async関数外なので処理を待たない

// 実行結果
// 1
// 6
// 2
// 3
// 5
// 4

awaitで非同期結果を待てるのはasync関数内のみ

async関数内でawaitをしてもasync関数外の処理はawaitされずに
実行される

index.js


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

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

awaitFunc();
console.log(4); //async関数外なので処理を待たない

// 実行結果
// 1
// 4
// await 
// 2

console.log(4)はasync関数外のためPromiseの結果を待たず実行される

まとめ

awaitはasync関数にしかつけられない。
awaitはasync関数内でしか書けない → 構文エラーになる
awaitを付けたasync関数内で非同期処理をする場合は合わせてawaitを付ける必要がある → つけないとawaitが効かなくなる。
awaitを付けた関数は値をPromiseで返す必要がある → つけないとawaitがきかない
- axiosやfetchAPIは元々、Promiseなので問題ない
- settimeoutやxmlHttpRequestはPromiseでないので new Promise()して返す必要がある。

参考

JavaScriptのasync／awaitが動かないときの対処方法

【javascript】awaitが効かないパターン

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

awaitを設定した関数はPromise型で返す必要がある。

fetchAPIを使うパターン

axiosを使うパターン

XMLHttpRequestを使う場合

Promiseで返却するパターン

戻り値をPromiseで返さない場合

awaitしているasync関数内で別の非同期処理を呼んでいる場合

awaitが有効

awaitが無効

awaitで非同期結果を待てるのはasync関数内のみ

まとめ

参考

関連記事

【Python × JavaScript】非同期処理の違いを整理する

新着記事

ストリームとは何か？

【Python】デバッグの仕組みを理解する(debugpy | DAP | Attach | Launch）

【Python × JavaScript】非同期処理の違いを整理する

【Python】イテレータとは何か？｜遅延評価と反復モデルの本質

【FastAPI】非同期と並行処理の構造を理解する