🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

5回答

1134閲覧

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

sasa0330

総合スコア64

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2022/11/23 07:56

編集2022/11/23 11:45

実現したいこと

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

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

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

customize.js

1$(async function () { 2 func1(); 3 await func2(); 4 func3(); 5})

base.js

1//処理1 2const func1 = () => { 3 //1の処理 4} 5 6//処理2 7const func2 = () => { 8 return new Promise((resolve, reject) => { 9 //ajaxの処理 10 }) 11} 12 13//処理3 14const func3 = () => { 15 //3の処理 16}

課題

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

customize.js

1$(function () { 2 func1(); 3 func2(); 4 func3(); 5})

base.js

1//処理1 2const func1 = () => { 3 //1の処理 4} 5 6//処理2 7export const func2 = async () => { 8 await new Promise((resolve, reject) => { 9 //ajaxの処理 10 }) 11} 12 13//処理3 14const func3 = () => { 15 //3の処理 16}

目的

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

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/11/23 08:58 編集

なぜ fetch を使わないのですか? > customize.js:他の人が手を加えられるjs > base.js:他の人が手を加えられないjs そのあたり、何を言ってるのか分からないです。base というのがライブラリのようなもので、それを利用するユーザーが customize を作ってその中にライブラリを使ったコードを書く・・・のかと思ったけど、そうではないようだし。
退会済みユーザー

退会済みユーザー

2022/11/23 11:52

2 回目 なぜ fetch を使わないのですか?
sasa0330

2022/11/23 12:01 編集

回答ありがとうございます。 >なぜ fetch を使わないのですか? fetchを知りませんでした。 調べてみましたがfetchを使えば、async・awaitやPromiseと同じようなことをより簡潔に書くことができるということでしょうか。 >base というのがライブラリのようなもので、それを利用するユーザーが customize を作ってその中にライブラリを使ったコードを書く イメージはこの通りであっています。 base.jsはjQueryのプラグインのようなもので、その中で定義している便利な関数をcustomize.jsに記述することで実行できるイメージです。 伝わりずらければすみません。
退会済みユーザー

退会済みユーザー

2022/11/23 12:15 編集

fetch を勉強してみて、その上でどうのように書くのが良いかを考えることをお勧めします。fetch を使うということになれば、 const func2 = async () => { // ・・・中略・・・ const response = await fetch("/api/Canvas", params); const message = await response.json(); // ・・・中略・・・ }; というような書き方になると思います。
退会済みユーザー

退会済みユーザー

2022/11/23 23:59 編集

質問者さん、その後無言ですが func2 の「JavaScriptで非同期通信」は結局どうしたいのでしょう? 質問のコードのように Promise を使う? 私が提案した fetch (Promise を返す) を使うように方針変更する?
yambejp

2022/11/24 00:48 編集

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

退会済みユーザー

2022/11/27 00:39

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

回答5

0

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

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


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

js

1$(async function () { 2 await func1(); 3 await func2(); 4 await func3(); 5})

投稿2022/11/23 21:29

編集2022/11/24 07:48
int32_t

総合スコア21668

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/11/23 23:47

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

2022/11/23 23:58

書き方を変えました。
退会済みユーザー

退会済みユーザー

2022/11/24 00:10

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

2022/11/24 00:21

何らかのコールバックを使えば async / await を消せるとは思いますが、「customize.jsはシンプルな記述にしたい」が目的なのでコールバックも許容できないだろうと思いました。 コールバックも使わずに書く方法があるのなら、私の知識不足です。
退会済みユーザー

退会済みユーザー

2022/11/24 00:56

以下のドキュメントにあるコードを例にとると、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

2022/11/24 01:36

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

退会済みユーザー

2022/11/24 01:51 編集

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

2022/11/29 10:59

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

0

ベストアンサー

質問のコードの、

$(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(); }

投稿2022/11/25 08:51

編集2022/11/26 21:28
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sasa0330

2022/11/29 11:03

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

0

不可能です。

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

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

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

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

js

1$(async function () { 2 func1(); 3 await func2(); 4 func3(); 5})

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

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

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


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

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

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

js

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

投稿2022/11/24 07:32

miyabi-sun

総合スコア21203

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sasa0330

2022/11/29 11:01

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

0

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

javascript

1$(function(){ 2 func1(); 3 $.when(func2()).done(function(){ 4 func3(); 5 }); 6});

投稿2022/11/24 01:06

編集2022/11/24 01:07
yambejp

総合スコア116644

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2022/11/23 10:17

user_x_xxx

総合スコア22

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sasa0330

2022/11/23 11:54

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問