非同期処理の順番が思うようにいかない

Question

質問失礼いたします。

現在、Vue.jsでアプリを開発中なのですが、API1で取得した番号をAPI2にパラメーターを投げてdataArrayの値を出力したと思っているのですが、axiosの非同期処理を使っている関係で最終的なdataArrayは空の状態となってしまいます。setTimeoutで1秒後にconsole.logすると値が入っています。
setTimeoutを使わずにデータを非同期処理を順番に実行する方法が分からず何か良い方法はございますでしょうか？アプローチ自体間違えていますでしょうか？

<script lang="ts">
	import { ref } from "#imports";
	import axios from 'axios';

	export default {
		setup() {
			let dataArray = ref([]);
			axios.get(
				'http://〇〇api1',
			).then(response => {
				let hoge = [];
				for( let i = 0; i < response.data.ships.length; i++ ) {
					hoge.push(response.data.ships[i].ship_id);
				}
				hoge.forEach(el => {
					let params = new URLSearchParams();
					params.append('user_id', el);
					axios.post(
						'http://〇〇api2',
						params
					).then(response => {
						dataArray.value.push(...response.data.users);
					});
				});
			});
			// setTimeout(() => {
				dataArray.value.sort((a, b) => {
					return a.user_id < b.user_id ? -1 : 1;
				});
				console.log(dataArray.value);
			// }, 1000);
			return {
				ref,
				dataArray
			};
		},
	};
</script>

Answer 1

hoge.forEach() で axios.post() を実行していますが、これを hoge.map() にして axios.post() が返す Promise の配列を作り、Promise.all() ですべての Promise が解決するのを待ってから dataArray.value の処理を行いましょう。

Comments

[masa207]

ありがとうございます。
hoge.map()にするところまで行ったのですが、この後の処理でどのように書けばいいか分からずこのようなコードでいいのでしょうか？

let fugas = ref([]);
axios.get(
'http://35.79.14.242/api/manager/ships',
).then(response => {
let hoge = [];
for( let i = 0; i < response.data.ships.length; i++ ) {
hoge.push(response.data.ships[i].ship_id);
}
let foo = hoge.map((el) => {
let params = new URLSearchParams();
params.append('ship_id', el);
axios.post(
'http://35.79.14.242/api/manager/ships/sailors',
params
).then(response => {
return response;
});
});
console.log(foo);
});
// setTimeout(() => {
fugas.value.sort((a, b) => {
return a.user_id < b.user_id ? -1 : 1;
});
console.log(fugas.value);
// }, 1000);
return {
ref,
fugas
};

[int32_t]

map() に指定する関数は値を返さないといけません。この場合は axios の Promise を返したいので、return axios.post(...); です。中に then は不要です。

その後、Promise.all(foo).then(...) です。

[masa207]

ありがとうございます。
ご指示いただいた内容で全てのデータを取得する事は出来ました。