APIリクエストが何かしらで失敗した時、またはAPIリクエスト後、処理中でOKになってから後続のAPIリクエストを行いたい時、今回の実装を使います。
目次
コード
さっとコードだけ見たい方はこちら。
/**
* API Request
*
* 最大2.5秒間で5回リトライを行い、HTTPステータスのチェックを行う
* 全てのリトライ後も200が返ってこない場合は、nullを返す
*/
export async function GetAPIRequest() {
let retryCount = 0
const maxRetries = 5
await new Promise(resolve => setTimeout(resolve, 300))
while (retryCount < maxRetries) {
try {
const response = await fetch(`API request URL`, {
method: 'GET'
})
if (response.status === 200) {
return await response.json()
}
console.log('Retrying...')
} catch (error) {
console.error('Error:', error)
} finally {
await new Promise(resolve => setTimeout(resolve, 500))
retryCount++
}
}
return null
}解説
whileとsetTimeoutを利用して、APIリクエストの回数と実行時間を制御しています。
whileでリトライ回数を制御します。この例では、maxRetries変数の数だけループして抜けます。
let retryCount = 0
const maxRetries = 5
while (retryCount < maxRetries) {
...(APIリクエスト)
retryCount++
}whileの中でAPIリクエストを記載し、任意の処理を実行・チェックします。この例ではHTTPステータスをチェックしています。
API側が処理中の場合、待機をする必要があります。setTimeout を使うことで、数秒まってから取得するようにしています。これはAPI側の処理速度に依存するため、どれくらいの時間がかかるのかなどで適切な数値を指定します。
さらに、fainallyで処理が成功、失敗した時の全てにおいてリトライ回数をインクリメントするようにします。
try {
const response = await fetch(`API request URL`, {
method: 'GET'
})
if (response.status === 200) {
return await response.json()
}
console.log('Retrying...')
await new Promise(resolve => setTimeout(resolve, 500))
} catch (error) {
console.error('Error:', error)
await new Promise(resolve => setTimeout(resolve, 500))
} finally {
retryCount++
}Summay
APIリクエストのリトライ処理をコードにしました。
実装は簡単ですが、APIリクエストされる側がどのような動作をしているのかによって、処理を設定する必要があります。
