Javascript promiseの経過時間に応じて処理を分けたい

Question

APIを叩いたあと、その結果を取得する時にかかった時間に応じて処理を入れたいのですが何か方法はありますか？

以下の例では、レスポンスに5秒以上にかかった場合のデータ取得中にローディング画面を表示したい等を想定しています。

export async function handling<T>(fetchData: Promise<T>, dispatch: Dispatch<{}>){
  const response = await fetchData;
  if(time > 5000) dispatch(...) // responseの待ちに5秒以上たったらの処理
  return response;
}

Comments

[Lhankor_Mhy]

そのコードですと、ロードが終わった後にローディング画面が出ることになると思いますが、そういうことではないですよね？

[yochun02]

返信が遅れてしまい申し訳ありません。
そうですね。タイミングとしてはapiを叩いた後、数秒後(今回の場合5秒)経つまでにレスポンスが返らなかった場合にローディングを表示したままにする
という感じですね。
例えば、レスポンスに1秒かかるapiを叩く場合はローディング画面を出さず、６秒かかるものはローディング画面を出したままにする(5~6秒の間)ということですね。

Answer 1

5秒待ってからローディングするくらいなら最初からローディングを出せば良いと思います

Answer 2

経過時間を測るのは、最初に現在日時を取得しておいて、処理後／処理中の時点の現在日時から最初の日時を引けば出てきます

Answer 3

忘れられがちですが、Promise.raceを使ってはどうでしょうか。

async function handling( fetchData , dispatch )
{
	let result = await Promise.race(
	[
		fetchData,
		new Promise(resolve=>setTimeout(resolve,5000))
	] );
	if( result != undefined )return result;
	dispatch();
	return fetchData;
}

このコードだとfetchDataがundefinedを返すと意図しない動作をするので、
undefinedを返す可能性があるならその辺は適当にコードを追加して下さい。

Comments

[yochun02]

ありがとうござます！

Answer 4

こういうことですか？

const timeoutID = setTimeout( ()=>dispatch(...), 5000)
const response = await fetchData;
clearTimeout(timeoutID);