Debouncing HTTP requests using RxJS
In the previous recipe, we learned how to use the
switchMap operator to cancel previous HTTP calls if a new HTTP call comes. This is fine, but why even send multiple calls when we can use a technique to wait a while before we send an HTTP call? Ideally, we'll just keep listening to duplicate requests for a period of time and will then proceed with the latest request. In this recipe, we'll be using the
debounceTime operator to make sure we're only sending the HTTP call when the user stops typing for a while.
The project that we are going to work with resides in
chapter05/start_here/using-debouncetime-operator, inside the cloned repository.
- Open the project in VS Code.
- Open the Terminal and run
npm installto install the dependencies of the project.
- Once done, run
ng serve -o.