Ajaxの処理を入力順で実行したい

Question

実現したいこと

Ajaxの処理を思い通りの順番で実行したい。

前提

生徒の成績を登録するプログラムを書いています。
４行から20行程度の表で、参加生徒の生徒コードと生徒名が表示されています。
そのFormに各生徒の点数を入力し、一括入力しようとしています。

下にあるコードで一括処理をしようとすると、登録はできるのですが、順番が
バラバラに登録されてしまいます。再表示するときに入力した順番で表示したい
と考えていますがうまくいきません。
Ajaxは「非同期処理」であることはわかっているのですが、これを同期的な処理
にする方法がわかりません。

該当のソースコード

``
function doRecordAdd(gyoCount){

for (let i = 0; i < gyoCount; i++){
	if($('#record' + i).val() != ""){
		
		$.ajax({
			type: "POST",
			url: "../code/record/RecordAdd.php",
			data: {"testId":$('#testId').val(), "seitoId":$('#seitoId' + i).val(), "record":$('#record' + i).val()},
			dataType: 'text',

		}).done(function(response) {

			if(response != 0){
				alert('追加登録されました。');
				
			}else{
				alert('追加登録できませんでした。');

			}

		}).fail(function(response_j) {
			alert('参加申込できませんでした。管理者にご連絡下さい。T');
				// 通信失敗時の処理
		});

	}else{
		alert("データが有りません");
	}
}
	

}

``

試したこと

「promis/differd」や「async/await」などの方法でajaxを同期処理できることは
わかっていて、特に今回の場合は「async/await」がいいんじゃないかと考え、いろいろ
いじってみましたがうまくいきませんでした。
いろいろな資料を読んでも理解できず、当てずっぽうに async と await を組み込んで
みましたが当然のことながらうまくいきませんでした。

よろしくご指導ください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

『再表示』とはご提示のコードでいうとどの部分に当たりますか？ alert('追加登録されました。') ですか？

Answer 1

処理的にはこうですが

$(async function(){
  for(・・・){
    await new Promise(function(resolve){
      $.ajax({
        ・・・
     }).done(function(data){
        resolve();
      });
    });
  }
});

そもそもデータを同期的に冗長に送りつけるのは無駄です。
サーバー側で複数のデータを対処できるようなAPIを用意するか
表示を「送信順」という曖昧なものではなくユーザーID順など明示的なルールを決めることです

Comments

[shaketonori]

回答ありがとうございました。
「眼からウロコ」でした。確かに、漫然と「送信順」でなく、「ID順」や「点数の降順」といった明示的なルールを設けるべきですね。成績データとしてはデタラメ（？）な順で登録されても、表示するときに必要なソートをすればいいわけですから。
今回は他の方に「ベストアンサー」を差し上げましたが、yambejpさんの提示して頂いたコードを見て、更に勉強したいと思います。
ありがとうございました。

Answer 2

こういうことでしょうか？

async function doRecordAdd(gyoCount) {

    for (let i = 0; i < gyoCount; i++) {
        if ($('#record' + i).val() != "") {

            await $.ajax({
                type: "POST",
                url: "http://example.com/code/record/RecordAdd.php",
                data: { "testId": $('#testId').val(), "seitoId": $('#seitoId' + i).val(), "record": $('#record' + i).val() },
                dataType: 'text',

            }).done(function (response) {

                if (response != 0) {
                    alert('追加登録されました。');

                } else {
                    alert('追加登録できませんでした。');

                }

            }).fail(function (response_j) {
                alert('参加申込できませんでした。管理者にご連絡下さい。T');
                // 通信失敗時の処理
            }).catch(function () { });

        } else {
            alert("データが有りません");
        }
    }
}

Comments

[shaketonori]

回答ありがとうございました。
私の希望通りの動きをしてくれました。シンプルに「async」を付けた関数の中で 「await」をajaxに着ければいいんですね。いたって簡単でびっくりしました。
ありがとうございました。

[Lhankor_Mhy]

お役に立てたようで何よりです。

なお、.catch() も付けていますので、お気をつけて。

Answer 3

$.ajax() メソッドの引数に async: false を追加してはどうでしょう。

あるいは fetch を使って以下のように記述します。

(async function() {
  'use strict';

  const Util = {
    formData(obj) {
      const formData = new FormData();
      Object.keys(obj).forEach(key => {
        formData.append(key, obj[key]);
      });
      return formData;
    },
    fetchPost(url, obj) {
      return fetch(url, {method: 'POST', body: Util.formData(obj)});
    },
  };

  for (let i = 0; i < 10; ++i) {
    const url = '../code/record/RecordAdd.php';
    const data = {id: i + 1};
    const response = await Util.fetchPost(url, data);

    if (!response.ok) {
      alert('参加申込できませんでした。管理者にご連絡下さい。');
      break;
    }

    // 必要なら
    const result = await response.text();
    if (result != 0) {
      // ...
    }
  }
}());

Comments

[yambejp]

$.ajaxのasync指定は非推奨なのでNGです

[arcxor]

https://api.jquery.com/jQuery.ajax/

> As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done().

確かに、async: false をつけただけでは元のコードは期待通り動かないようですね。