I am polling for my report adding 5 seconds interval between each request.
const addDelay = timeout => new Promise(resolve => setTimeout(resolve, timeout))
export const myReport = () => async (dispatch) => {
dispatch({
type: constants.DOWNLOAD_REPORT_REQUEST
})
let url = `/admin/dashboard/report.js?project_id=${projectId}&tool_id=${toolId}`
try {
const subscribe = async (uri) => {
let response = await fetch(uri, {
method: 'GET',
headers: {
'content-type': 'application/json',
'x-api-token': `Bearer ${token}`
}
})
const resBody = await response.json()
if (resBody.status === 'success') {
window.location.href = resBody.url
dispatch({
type: constants.DOWNLOAD_REPORT_SUCCESS
})
} else {
await addDelay(5000)
await subscribe(url)
// return;
// setTimeout(() => {
// dispatch({
// type: constants.SHOW_DOWNLOAD_POPUP
// })
// return;
// }, 15000);
}
}
subscribe(url)
} catch (error) {
dispatch({
type: constants.DOWNLOAD_REPORT_FAILURE,
errorMessage: error.status
})
}
}
Now, here I want to stop the polling after 15 seconds and show a popup.
The issue is I cannot add setTimeout here because I am using async. Also it won't stop calling subscribe method again and again as it keeps getting in else part, return is not working.
I want to get out of else part, stop calling the function and show popup after 15 seconds over. How do I achieve this?
Your return statement can't possibly work because this function is recursive - it'll never get there if the fetch keeps failing. What about just adding an index to track how many times you've retried subscribe?
const addDelay = (timeout) =>
new Promise((resolve) => setTimeout(resolve, timeout));
const failed = 0;
export const myReport = () => async (dispatch) => {
dispatch({
type: constants.DOWNLOAD_REPORT_REQUEST,
});
let url = `/admin/dashboard/report.js?project_id=${projectId}&tool_id=${toolId}`;
try {
const subscribe = async (uri) => {
let response = await fetch(uri, {
method: 'GET',
headers: {
'content-type': 'application/json',
'x-api-token': `Bearer ${token}`,
},
});
const resBody = await response.json();
if (resBody.status === 'success') {
window.location.href = resBody.url;
dispatch({ type: constants.DOWNLOAD_REPORT_SUCCESS });
} else {
if (failed >= 3) {
// whatever you want to do on fail
} else {
failed += 1;
await addDelay(5000);
await subscribe(url);
}
}
};
subscribe(url);
} catch (error) {
dispatch({
type: constants.DOWNLOAD_REPORT_FAILURE,
errorMessage: error.status,
});
}
};
You can keep track of the amount of time that has passed since polling started and exit when it reaches zero.
const addDelay = timeout => new Promise(resolve => setTimeout(resolve, timeout))
export const myReport = () => async (dispatch) => {
dispatch({
type: constants.DOWNLOAD_REPORT_REQUEST
})
let url = `/admin/dashboard/report.js?project_id=${projectId}&tool_id=${toolId}`
let remainingPollingTime = 15000 // <--------
try {
const subscribe = async (uri) => {
let response = await fetch(uri, {
method: 'GET',
headers: {
'content-type': 'application/json',
'x-api-token': `Bearer ${token}`
}
})
const resBody = await response.json()
if (resBody.status === 'success') {
window.location.href = resBody.url
dispatch({
type: constants.DOWNLOAD_REPORT_SUCCESS
})
} else {
if(remainingPollingTime <= 0) { // <--------
dispatch({
type: constants.SHOW_DOWNLOAD_POPUP
})
return
}
remainingPollingTime -= 5000 // <--------
await addDelay(5000)
await subscribe(url)
}
}
subscribe(url)
} catch (error) {
dispatch({
type: constants.DOWNLOAD_REPORT_FAILURE,
errorMessage: error.status
})
}
}