質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

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

Ajax

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

解決済

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

sasa0330
sasa0330

総合スコア46

JavaScript

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

Ajax

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

5回答

0リアクション

0クリップ

414閲覧

投稿2022/11/23 07:56

編集2022/11/23 11:45

実現したいこと

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

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

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

customize.js

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

base.js

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

課題

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

customize.js

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

base.js

//処理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に記述したいです。

よろしくお願いします。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

SurferOnWww

2022/11/23 08:58 編集

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

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に記述することで実行できるイメージです。 伝わりずらければすみません。
SurferOnWww

2022/11/23 12:15 編集

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

2022/11/23 23:59 編集

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

2022/11/24 00:48 編集

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

2022/11/27 00:39

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

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

Ajax

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