My implementation of debounce axios request left the promise in pending state forever, is there a better way?
But I am still not 100% sure about letting a promise stay in pending forever.
I agree that it's not a good idea. A better approach would be to move the entire promise chain inside the debounced function.
Another option would be to return a cached value when the debounced call does not trigger a new request. This would solve your problem that you always need to return a promise:
function debounce(func, wait) {
var timeout, value;
return function() {
if (!timeout) value = func.apply(this, arguments);
clearTimeout(timeout);
timeout = setTimeout(() => {
timeout = value = null;
}, wait);
return value;
};
}
Of course that would mean that in some cases, multiple then
handlers will be called when your request finishes. It depends on your application whether that is a problem or just superfluous work.
The other question is that Promise Anti patterns suggested not creating unnecessary promise. But in my case creating a new promise seems necessary.
Only one promise is necessary: when you create the never-resolved one. You can write that as
function debounce(func, wait) {
var timeout;
const never = new Promise(resolve => {/* do nothing*/});
return function() {
const result = timeout ? never : func.apply(this, arguments);
clearTimeout(timeout);
timeout = setTimeout(() => {
timeout = null;
}, wait);
return result;
};
}
Or at least avoid the .then(resolve).catch(reject)
part. Better write
function debounce(func, wait) {
var timeout;
return function() {
return new Promise(resolve => {
if (!timeout) resolve(func.apply(this, arguments));
// ^^^^^^^
clearTimeout(timeout);
timeout = setTimeout(() => {
timeout = null;
}, wait);
});
};
}
And should you consider to reject the promise in case that the timeout has not yet occurred (so that the calling code can handle the rejection), you don't need new Promise
either:
function debounce(func, wait) {
var timeout;
return function() {
const result = timeout
? Promise.reject(new Error("called during debounce period"))
: Promise.resolve(func.apply(this, arguments));
clearTimeout(timeout);
timeout = setTimeout(() => {
timeout = null;
}, wait);
return result;
};
}