Ajax（APIのGET処理）の共通関数は作れますか？

意味不明なことを言っていたらすみません。

フロントでAPIのデータ取得を共通関数で作りたいと思ってます。
今まではAPIを読んだ処理内で受け取ったデータの処理、コントロールの制御はajaxStop内で行っていました。

今回他の画面でも同じ処理をしたい為、共通関数としてAPIのGETを作り、戻り値に値を設定、その後その値を表示処理したいと思っています。

しかし、表示処理→API処理の流れとなり、戻り値が空の状態で表示処理をしてしまい失敗。（非同期だからかな）

ならばと、グローバル変数に値をいれて、ajaxStop内で表示処理をしましたが、共通関数ではajaxStopが反応せず、ajaxStop内の処理が先に走り、その後API処理が走り失敗。

そもそもAPIで共通関数みたいなことが無理があるのでしょうか？
（タイマーは使いたくない）

ざっくりとしたイメージコード
index.ts

import { CommonInfo } from './common';

$(() => {
 let getinfo = CommonInfo();
 $('#index').html('<p>'+getinfo+'</p>');
});

$(document).ajaxStop(function () {
　// ここではCommonInfo()が終わってからの処理が出来ない
});

common.ts

　　　：
export function CommonInfo():string {
  let info : string;
  const getInfo= getJqXHR();　←APIGET処理
  $.when(getInfo)
    .done((jqInfo) => {
       info = jqInfo.text;
    })
   .fail(() => {
      info = ''; 
    })
    .always(() => {
      return info;
    });
}

miyabi_pudding

2021/07/09 19:28

TypeScriptですが、何かフロントエンドフレームワークは使っておりますか？ Angularとか、Reactとか。使っているなら、その旨の記載と、質問タグに追加してください。それによって、やり方がまるで変わりますので。

m.ts10806

2021/07/09 20:35

動的なところを変数により可変とするだけなので「できる」という答えになりますが、そういうことですか？

behoimi80

2021/07/10 00:50 編集

miyabi_takatsuk様 npmを使用しています。（回答になってますか？） m.ts10806様え！ほんとですか！？「動的なところを変数により可変とする」というところちらでもググり調べますが、ヒントのいただけませんでしょうか。よろしくお願いいたします。

m.ts10806

2021/07/10 01:37

どこを動的どするかは要件次第。引数でうまく分岐させるとかになるんでは。非同期処理の役割って結局APIで、「リクエストに対して得たレスポンスで何かしら処理する」ですから、送信するURLとパラメータは可変なので変数で渡して後は処理結果をDeferred で受け取るだけ　だと思います。何か難しく考えすぎてる様な。

behoimi80

2021/07/10 20:10

m.ts10806様ありがとうございました。無事作れました。またご縁がありましたらアドバイスよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

TypeScriptで書かれていますが、jQuery.Deferred の理解の問題のような気がしますので、TypeScriptには触れません。

コードを見たところ怪しい箇所があります。

CommonInfoで$.whenのオブジェクトを返していない（コードイメージだからかもしれませんが）
$.whenを使った非同期処理をうまく扱えていない
ajaxStopの使い方としては正しくない

今まではAPIを読んだ処理内で受け取ったデータの処理、コントロールの制御はajaxStop内で行っていました。

共通化するとなると、「APIを呼ぶ処理」だけを切り出して、「受け取ったデータの処理」は呼び出し毎に異なるのでCommonInfoでは「APIを呼ぶ処理」だけを行い、CommonInfoを呼び出した側で「受け取ったデータの処理」を指せるとよいかと思います。

表示処理→API処理の流れとなり、戻り値が空の状態で表示処理をしてしまい失敗

CommonInfoで作った$.whenもしくは$.ajaxの結果を返していないのと、$.whenもしくは$.ajaxの結果を使った非同期処理がうまく扱えていないように思います。返していないのはコードイメージだからかもしれませんが、扱い方についてはおそらく理解されていないかと思います。
この$.whenもしくは$.ajaxの非同期処理は jQuery.Deferred を使っていますので、そのお作法に従わなければいけません。

ざっくり言えば、ajaxなどの非同期処理が、正常終了したとき(done)、異常終了したとき(fail)、何でもいいから終了した時(always)のタイミングで処理してほしい関数を登録しておく、というやり方です。

（最近はJavaScriptにもPromiseが入りjQuery.Deferredと同等なことができたり、async/awaitで読みやすい書き方になったりと進化していますが、今回はあまり関係ないので省略します）

ならばと、グローバル変数に値をいれて、ajaxStop内で表示処理をしましたが、共通関数ではajaxStopが反応せず、ajaxStop内の処理が先に走り、その後API処理が走り失敗。

グローバル変数にいれた結果を使って処理したかったのだと思いますが、呼ばれるタイミング的にグローバル変数に入れる前にajaxStopの処理が呼ばれるので、できないと思います。
ただ、$.whenを使わなければ順序的にうまく処理できそうではありました。が、どちらにしても正しいやり方ではないので、おススメしません。

ajaxStopはajaxを呼ぶ処理が同時に2,3つとか増えてくるとこの制御が大変なので、ajaxStopで巻き取れるという感じになってると思います。なので、ajaxのレスポンスの結果を使って表示制御に使うにはあまり適していません。

ということで、私ならこうかくという感じで、JavaScriptに書き換え、動く形に整え、ログを足して実行してみました。
https://jsfiddle.net/g98snd2w/4/

投稿2021/07/10 00:51