JavaScriptで非同期通信する際のawaitの使い方について

Question

実現したいこと

awaitを使って3つの処理を順番に（直列で）実行するようにしたいです。
前提として以下の2つのファイルがある状況です。

customize.js：他の人が手を加えられるjs
base.js：他の人が手を加えられないjs

通常は以下のように非同期の関数をawait func2()として呼び出すかと思うのですが

$(async function () {
    func1();
    await func2();
    func3();
})

//処理1
const func1 = () => {
    //1の処理
}

//処理2
const func2 = () => {
    return new Promise((resolve, reject) => {  
        //ajaxの処理
    })
}

//処理3
const func3 = () => {
    //3の処理
}

課題

以下のように、customize.jsはシンプルな記述にしたいです。
そのためにacincとawaitはbase.jsに切り分けたいのですが、動かしたところ直列処理になっていないように感じました。
改善方法はありますでしょうか。

$(function () {
    func1();
    func2();
    func3();
})

//処理1
const func1 = () => {
    //1の処理
}

//処理2
export const func2 = async () => {
    await new Promise((resolve, reject) => {
        //ajaxの処理
    })
}

//処理3
const func3 = () => {
    //3の処理
}

目的

・customize.jsはjsに詳しくない人も触れる前提なので、可能な限りシンプルにしたいです。
・customize.jsのasyncやawaitを間違えて削除した際にバグに繋がる可能性があるため、リスクヘッジとしてbase.jsに記述したいです。

よろしくお願いします。

Comments

[退会済みユーザー]

なぜ fetch を使わないのですか？

> customize.js：他の人が手を加えられるjs
> base.js：他の人が手を加えられないjs

そのあたり、何を言ってるのか分からないです。base というのがライブラリのようなもので、それを利用するユーザーが customize を作ってその中にライブラリを使ったコードを書く・・・のかと思ったけど、そうではないようだし。

[退会済みユーザー]

2 回目

なぜ fetch を使わないのですか？

[sasa0330]

回答ありがとうございます。
>なぜ fetch を使わないのですか？
fetchを知りませんでした。
調べてみましたがfetchを使えば、async・awaitやPromiseと同じようなことをより簡潔に書くことができるということでしょうか。

>base というのがライブラリのようなもので、それを利用するユーザーが customize を作ってその中にライブラリを使ったコードを書く
イメージはこの通りであっています。
base.jsはjQueryのプラグインのようなもので、その中で定義している便利な関数をcustomize.jsに記述することで実行できるイメージです。
伝わりずらければすみません。

[退会済みユーザー]

fetch を勉強してみて、その上でどうのように書くのが良いかを考えることをお勧めします。fetch を使うということになれば、

const func2 = async () => {
// ・・・中略・・・
const response = await fetch("/api/Canvas", params);
const message = await response.json();
// ・・・中略・・・
};

というような書き方になると思います。

[退会済みユーザー]

質問者さん、その後無言ですが func2 の「JavaScriptで非同期通信」は結局どうしたいのでしょう？

質問のコードのように Promise を使う？ 私が提案した fetch (Promise を返す) を使うように方針変更する？

[yambejp]

func2をexportしている意味もよくわからないですね。
jQueryとmoduleが入り混じっている感じでしょうか？
とりあえずまちがって動作しているソースの全文がないとなんとも・・・

[退会済みユーザー]

質問者さん、回答が出ているのでそれらに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？ 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。無言で放置は NG です。

Answer 1

非同期処理が完了した後に何かをしたい場合、async await か何らかのコールバック関数が必要です。

customize.js からそれらを消す書き方はないと思います。

---

書き方をシンプルにするために、すべてに await を付けてもいいです。

$(async function () {
    await func1();
    await func2();
    await func3();
})

Comments

[退会済みユーザー]

「この場合」と言うのはどの場合でしょうか？

[int32_t]

書き方を変えました。

[退会済みユーザー]

> customize.js からそれらを消す書き方はないと思います。

たびたびすみません。そこもわかりません。質問者の目的は customize.js で async / await を使うのを避けたいということだそうですが、それだけなら書き方次第で可能だと思いますが。

[int32_t]

何らかのコールバックを使えば async / await を消せるとは思いますが、「customize.jsはシンプルな記述にしたい」が目的なのでコールバックも許容できないだろうと思いました。

コールバックも使わずに書く方法があるのなら、私の知識不足です。

[退会済みユーザー]

以下のドキュメントにあるコードを例にとると、base.js には resolveAfter2Seconds 関数ではなくて、asyncCall 関数を含めるようにすれば、customize.js では asyncCall(); とすれば、質問者さんの目的「customize.js で async / await を使うのを避けたい」は可能だと単純に思ったのですか。

非同期関数
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function

[int32_t]

func1(); func2(); func3(); は固定的なものではなくて customize.js では任意の関数を任意の順番で並べられるような感じかなと思いましたので、asyncCall(); の次の行に後続の処理を書けないのはダメかなと思いました。
私が質問者の意図を深読みしすぎているかもしれません。

[退会済みユーザー]

上の私のコメントのようなそんな単純ことではダメ（asyncCall(); の次に func3(); を実行したいなら、asyncCall(); にも await を付与しないと待機しないのでダメ）でした。余計なコメントすみませんでした。

[sasa0330]

>すべてに await を付けてもいいです。
ありがとうございます。
視点を変えてこの方法でもありですね。

参考になります。

Answer 2

質問のコードの、

$(function () {
    func1();
    func2();
    func3();
})

は同期的に順番に実行されるのですが、

質問に書いてあった 2 つ目の func2、

//処理2
export const func2 = async () => {
    await new Promise((resolve, reject) => {
        //ajaxの処理
    })
}

・・・が非同期関数なので Promise を返すというところが、結果が期待したような順番にならない理由だと思います。

func2(); で即 Promise が返ってきて完了とみなされ、次の func3(); に制御が移るので、上の「//ajaxの処理」の前に func3(); が実行されたのではないですか。

「//ajaxの処理」は Promise が引き継いで、応答が返ってきてから行われて、func3(); の後になったのだと思います。

なので、func2(); の完了を待機するなら、質問の最初のコードのように、

$(async function () {
    func1();
    await func2();
    func3();
})

とする他なさそうです。

---

【追伸】

質問に対するコメントで fetch を使う話をしましたので、質問の「//ajaxの処理」に fetch を使うとどうなるのかを書いておきます。

結局は上と同じ話で、async / await の使用は避けられませんが。

例として、GET 要求を受けると 2 秒後に以下の JSON 文字列を返す Web API から fetch を使って応答を取得するとします。

{"id":5,"name":"abc"}

JavaScript のコードは以下のようにし、ボタンクリックなどのイベントで asyncTest を実行します。

const fetchHero5 = async () => {
    const response = await fetch("/api/values/5")
    const data = await response.json();
    console.log(data.name);
};
 
const writeLog = () => {
    console.log("writeLog の実行");
}
 
async function asyncTest()
{
    await fetchHero5();
    writeLog();
}

上のコードの asyncTest を実行するとコンソールには "abc" ⇒ "writeLog の実行" という順番に書きこまれます。

以下のようにすると、上の回答に述べたように fetchHero5() が即 Promise を返すので、制御が次の writeLog() に移って "writeLog の実行" が書き込まれ、fetchHero5 から返された Promise オブジェクトが fetch で Web API を呼んで 2 秒後に応答が返ってきてから "abc" と書き込みます。

function asyncTest()
{
    fetchHero5();
    writeLog();
}

Comments

[sasa0330]

ありがとうございます。納得できました。
fetchを使った実装も検討していたのでとても助かります。

Answer 3

不可能です。

Ajaxといった非同期処理を完了させるまで待ってから次の処理を走らせる。
これはPromiseやasync/awaitの開発で「あたかも同期処理っぽく書けるようになった」事で一定の解決はしました。

しかし、JavaScriptがシングルスレッドであり、
コールバック地獄をスッキリ書きたいがため、
オブジェクト指向プログラミングの手法で無理やりねじ伏せただけです。

非同期処理でイベントハンドラの先に持っていかれた関数の実行を待って、
同期敵に処理を継続するということは不可能なまま変わっていません。

以上のことから質問文の最初のコードが最善で、これ以上改良のしようはありません。

$(async function () {
    func1();
    await func2();
    func3();
})

---

実は非同期にせず同期のままAjaxを飛ばす方法があります。
参考記事: 非推奨になったAjaxの同期通信によるブラウザの警告を対策する

この同期版のAjaxはHTTP通信が帰ってくるまで、
ブラウザの操作を全て受け付けず停止させ、半ばフリーズさせた状態のまま待ち続けます。
流石にそれはあかん……

いくらコードが複雑になろうとも、
人類は非同期処理によるAjaxを使い続けざるを得ません。

---

・customize.jsはjsに詳しくない人も触れる前提なので、可能な限りシンプルにしたいです。
・customize.jsのasyncやawaitを間違えて削除した際にバグに繋がる可能性があるため、リスクヘッジとしてbase.jsに記述したいです。

JSが詳しくない人間でもちゃんと扱えるように、
あなたがしっかり教えたりレビューを行うしかありません。

同期処理を明示するならば、こんな方法もなくはないです。
これだとasync/awaitでは書けない同時並行で2つの処理をさせる事も可能です。

$(function () {
    func1();
    // func2の返り値はPromiseなので、thenメソッドを叩きながらハンドリングをする
    func2()
      .then(func3);
})

Comments

[sasa0330]

>最初のコードが最善で、これ以上改良のしようはありません。
ありがとうございます。
明確に結論をいただけて助かります。

Answer 4

ちょっと意図がわからないのですがpromiseであるfunc2の終了をまってfunc3を実行したいのであれば並列に記述するのはやめて$.whenのdoneメソッド内で後続処理を実行してください

$(function(){
  func1();
  $.when(func2()).done(function(){
    func3();
  });
});

Answer 5

それは辛いですね、、、🥺

Comments

[sasa0330]

問題がわかりづらいということですね。
ありがとうございました。