Ajaxで指定のID順に出力したい

Question

前提

Javascriptでショップのサイトを見に行き、商品の情報をスクレイピング処理するコードを書いています。

実現したいこと

goodsId順で出力したい

発生している問題

【1】のAjaxで商品情報と取り扱っているショップ名とショップのURLをリスト出力しています。
この際リストはgoodsId順で出力されます。

次に【2】のAjaxで、【1】で出力された情報をもとに１件ずつスクレイピング処理を行います。
結果として出力される１週間分の価格変動情報に商品情報を加えてリスト出力します。

ここで問題なんですが、【2】の処理結果がgoodsId順に並びません。
Ajaxは非同期である、とは理解していましたが、完全に順不同で出力されてしまうので、困っています。
Deferred()を挟んだりしてみましたがうまくいきません。

出力されたランダムなデータを配列化してsortしてみればいいのかと考えましたが、やり方がわかりません。

どなたかご指導ください。
よろしくお願いします。

該当のソースコード

	<script type="text/javascript">

		// 【１】「一覧表示」ボタン　クリック
		function indicateList() {
			// リスト表示用Ajax処理
			$.ajax({
			type: "POST",
			url: "../code/goods/GoodsListValid.php",
			//data: data,
			dataType: 'json',
			})
			// 通信成功時の処理
			.done(function(response_j) {
				let res = '';

				for (var i = 0; i < response_j.length; i++){

					console.log("response_j[i].goodsNo========" + response_j[i].goodsNo);

					searchPrice(response_j[i].goodsId, response_j[i].goodsNo, response_j[i].goodsName, response_j[i].shopName, response_j[i].shopUrl);

				}

			// 通信失敗時の処理
			}).fail(function() {
					alert("商品情報を検索できませんでした。管理者にご連絡下さい。");

			// 通信の成功失敗に関わらず必ず行う処理
			}).always(function() {
			});

		}


		// 【２】商品１件ごとにスクレイピング処理
		function searchPrice(goodsId, goodsNo, goodsName, goodsPrice, shopName, shopUrl) {

			// スクレイピング処理用Ajax
			$.ajax({
				type: "POST",
				url: "../code/scraping/ScrapingGoods_4.php",
				data: {"goodsNo":goodsNo, "shopUrl": shopUrl},                       // Webサーバに送信するデータ(上でシリアライズした)
				dataType: 'json',                 // Webサーバか受信するデータの形式
			})
			// 通信成功時の処理
			.done(function(response_j) {
				console.log("message.php の response_j======================" + response_j);
				let res = '';

				for (var i = 0; i < response_j.length; i++){

					res += '　' + '<span class="blue">' + response_j[i].dt + '</span>' + response_j[i].dd;
				}
				const obj = document.getElementById("priceList");
				obj.innerHTML += '<tr><td>' + goodsId + '　</td><td>' + goodsNo + '　</td><td>' + goodsName + '　</td><td>' + shopName + '　</td><td>' + res + '　</td></tr>';

			// 通信失敗時の処理
			}).fail(function() {
					alert("価格情報を検索できませんでした。管理者にご連絡下さい。");

			// 通信の成功失敗に関わらず必ず行う処理
			}).always(function() {
			});

		}

	</script>

Answer 1

async/await を使うのが簡潔な解決方法だと思います。

// 通信成功時の処理
.done(async function(response_j) {
  for (var i = 0; i < response_j.length; i++){
    console.log("response_j[i].goodsNo========" + response_j[i].goodsNo);
    await searchPrice(...);
  }
  ...

async function searchPrice(...) {
  try {
    let response_j = await new Promise((resolve, reject) => $.ajax(...).done(resolve).fail(reject));
    console.log("message.php の response_j======================" + response_j);
    ...
    obj.innerHTML += ...;
  } catch (e) {
    alert("価格情報を検索できませんでした。管理者にご連絡下さい。");
  }
}

Comments

[shaketonori]

int32_t さん、回答ありがとうございました。

ご提示いただいたコードをもとに async/await で書き直したところ、ID順に出力
されるようになりました。

私はこれまで async/await のことは知りませんでした。「async:false」が非推奨になって
非同期処理が連続する場合にどのように対処すればよいかわかりませんでした。
この機会に async/await というか Promise についてもっと勉強しようと思いました。

大助かりです。大変ありがとうございました。