Handling many and slow requests

Client

One way I like to do this is to create a dedicated closure for the request at hand.

Problems solved:

1. Suggestion searches where the last search term ('Rockaway Beach') is preferred over the earlier search term ('Ro') — the less descriptive search often finishes after the more specific one and leads to inaccurate results.

2. Scenarios where a request for whatever reason runs long, and it's unclear to the user what's happened.

Note isLoading is a template variable used to globally display a search spinner.

You will need to request this closure/instance once at start-up and use it without creating a new one for all calls.

Closure

latestSearchRequest() {
  let call
  let timer = 0
  let intervalId

  return async (url, config = {}) => {
    if (call) {
      call.cancel()
    }

    if (timer > 0) {
      timer = 0
    }

    if (this.isLoading) {
      this.isLoading = false
    }

    if (intervalId) {
      clearInterval(intervalId)
    }

    call = axios.CancelToken.source()

    config.cancelToken = call.token

    intervalId = setInterval(() => {
      timer += 100

      if (timer > 200) {
        this.isLoading = true
      }
    }, 100)

    const request = await axios.get(url, config)

    clearInterval(intervalId)

    timer = 0

    if (this.isLoading) {
      this.isLoading = false
    }

    return request
  }
},

On data setup

latestSearch: vm.latestSearchRequest(),

Use

let { data } = await this.latestSearch('path/to/endpoint', {
  params: {
    method: 'getAll',
    ...search
  }
})