0

I built a basic search function to get real-time search results from backend. The flow is basically like this

1 - watch search input, if length > 2 then send the changes a query to backend and fetch the results in the table.

watch:{
search(val,old){
  if (val.length >= 2 || old.length >= 2){
    this.setList({url:`/customer/my-bag/global-filter`, query_value:val}).then((res) =>{
      this.pagination.lastPage = res.data.meta.last_page
    })

2 - If the search input is '' then get all customers paginate them in 5 pages.

 if (this.search === ''){
    this.loadCustomers()
  }

SetList is a method in the store to get the result from API

methods: {
...mapActions("users", ["setList"]),

Result

Too many API requests for one search query ( around 40 requests). My goal is to make the search way better in terms of requests and "correct" method.

AlmoDev
  • 969
  • 2
  • 18
  • 46
  • 1
    Instead on each input value change doing a request, you could wait a few moments until there are no changes anymore and then do the request. – Michiel Jan 01 '21 at 17:02
  • 2
    Try debounce, https://stackoverflow.com/a/24004942/14144301 – CyberSrikanth Jan 01 '21 at 17:04
  • 2
    One way to decrease this number of requests is to use the debounce technique – Henrique Viana Jan 01 '21 at 17:07
  • hmm debounce sounds great but it would slow the process of "real-time" feature – AlmoDev Jan 01 '21 at 17:42
  • 1
    @AlmoDev while technically true, it is generally imperceptible to users as debounce's **wait** time is in milliseconds. Say you type 6 chars a second, your current method makes 6 requests, if you use `debounce` with a wait of **500 milliseconds**, you reduce the number of requests by half. You can play with the **wait** value, to satisfy yourself it is responsive enough, but it will always be a trade off between number of requests vs perceived real-time responsiveness. – Mark Small Jan 01 '21 at 18:21
  • Thank you for all your answer. I will do a denounce request – AlmoDev Jan 01 '21 at 18:27

0 Answers0