Using Lodash's Debounce on Axios Request Produces Unexpected Result

Question

My app updates every time text is typed. Then using debounce on an axios request, the requests are queued up until the timer runs out, and then they all go at once. I am trying to limit the requests to one per 10 second period. Where am I going wrong?

I'm doing this in ReactJS if that's of consequence.

const debouncedSync = _.debounce(() => {this.sync () }, 10000);

sync = (requestBody) => {
    axios.post('http://127.0.0.1:8000/Server/', requestBody);
  };

"_I am trying to limit the requests to one per 10 second period_" That would be [`_.throttle()`](https://lodash.com/docs/4.16.2#throttle) and not `_.debounce()`. Besides that, what is the actual problem? — Andreas, Oct 01 '16 at 18:10
Well that clears it up. Besides that the only problem is that I'm still a newb. Thanks very much! If you submit that as an answer I'll mark it accepted. — Slbox, Oct 01 '16 at 18:30

score 1 · Answer 1 · answered Jun 17 '18 at 14:50

please check faxios debounce

let fetcher = faxios()
.baseURL('http://jsonplaceholder.typicode.com')
.url('posts', 1, 'comments')
.debounce(1 * 1000); // debounce time 1000ms

fetcher
.FETCH // => Promise
.then(res => console.log('res1:',res))
.catch(err => console.log('error1:', err));

fetcher
.FETCH // => Promise
.then(res => console.log('res2:', res))
.catch(err => console.log('error2:', err));

fetcher
.FETCH // => Promise
.then(res => console.log('res3:',res))
.catch(err => console.log('error3:', err));

fetcher
.FETCH // => Promise
.then(res => console.log('res4:', res))
.catch(err => console.log('error4:', err));


/**

error1:debounced

error2:debounced

error3:debounced

res4:{...} 

**/

Using Lodash's Debounce on Axios Request Produces Unexpected Result

1 Answers1