Использование Lodash для удаления запроса Axios приводит к неожиданному результату

#javascript #reactjs #ecmascript-6 #lodash #axios

#javascript #reactjs #ecmascript-6 #Lodash #axios

Вопрос:

Мое приложение обновляется каждый раз, когда вводится текст. Затем, используя debounce для запроса axios, запросы помещаются в очередь до истечения таймера, а затем все они отправляются одновременно. Я пытаюсь ограничить количество запросов одним за 10-секундный период. Где я ошибаюсь?

Я делаю это в ReactJS, если это имеет значение.

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

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

Комментарии:

1. » Я пытаюсь ограничить количество запросов одним за 10-секундный период «, что было бы _.throttle() и нет _.debounce() . Кроме того, в чем собственно проблема?

2. Что ж, это проясняет ситуацию. Кроме того, единственная проблема заключается в том, что я все еще новичок. Большое спасибо! Если вы отправите это в качестве ответа, я отмечу, что он принят.

Ответ №1:

пожалуйста, проверьте 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:{...} 

**/