-2

In our application, we are using fetch to hit middleware, which in turn uses axios to call backend APIs. I have made a search bar and I want to invoke API calls at each keypress. I want to cancel the in-flight requests when a new keypress happens. I was wondering, where should I write the logic for cancelling the in-flight requests? In client-side or in the middleware and why?

Frosted Cupcake
  • 1,909
  • 2
  • 20
  • 42
  • Instead of cancelling, why not use a [debounce](https://stackoverflow.com/questions/24004791/can-someone-explain-the-debounce-function-in-javascript) function? – Yousaf Mar 28 '21 at 13:22
  • @Yousaf - should use both. – Adam Jenkins Mar 28 '21 at 13:25
  • @Yousaf Even with debounce, I need to cancel the in-flight requests as the API takes some time to return the result. – Frosted Cupcake Mar 28 '21 at 13:25
  • To cancel a request made using using `fetch`, look at [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) – Yousaf Mar 28 '21 at 13:28
  • @Yousaf I know how to cancel a request using fetch/Axios. I am asking whether to cancel it on the middleware or client-side. – Frosted Cupcake Mar 28 '21 at 13:29
  • 1
    I would do it on the side that initiated the request - the client side. Reason is that the side that initiates the request should control whether to cancel the request or not. – Yousaf Mar 28 '21 at 13:33
  • A request can never really be “cancelled” anyway. The abort controller just signals that any response that may get returned should be ignored. With regards to the server - client side cancelled requests are pretty meaningless. If the client cancelled it, the server doesn’t need to know about it. – Adam Jenkins Mar 28 '21 at 15:43
  • @Adam Actually, no. The backend can cancel internal pending tasks when the client cancels the request from their side. It totally depends on the architecture of the backend code. – Dmitriy Mozgovoy Apr 05 '21 at 00:03

1 Answers1

0

Edit: To comment on what @Yousaf said in the comments. If you view it as integral domain logic to cancel the request you should definitely make that explicit and deal with that on the client side. If it rather is a performance/data optimization then you might not want to clutter your client code just for that gain. In such a case creating a holistic optimization on the middleware side of things is preferred. I think this should give the author some sense about if they wish to implement things on the client or middleware side.

In the second link you can see how you can pass an AbortController as a signal property to the Axios call. You might already know this and are instead wondering how you should go about things if the actual calls to Axios are done in the middleware, outside of your immediate control.

In that case it's important to know what middleware you're using, because it might already support canceling requests. If you manage the middleware yourself this is functionality you can write.

If so you could implement a switching behavior, where you always cancel ongoing requests if new ones come in (if they are for the same purpose). This could be a mixture of matching the URL and the intention, which you could model with namespacing for example.

Holp
  • 283
  • 1
  • 5