Abort Fetch API Requests using AbortController

when working with asynchronous requests it's easy to create a situation where you create a whole bunch of requests only to get inconsistent updates to your UI not to mention something like autocomplete where if you're trigging a new request for every single letter that's a lot of HTTP requests so we're going to see how we can use the abort controller in react to manage and cancel requests that we no longer need the abort controller is an interface that gives you the ability to have more flexibility for when you abort request using the fetch API when setting up an abort controller we create a new signal from that controller which is what we pass into the fetch API in order to gain that flexibility now in the context of react it's pretty much going to look similar to what we saw on mdn we're just going to have some different apis that we can take advantage of in order to make it easier to work with it so to get started I created a simple application that lists out a bunch of Pixar movies whenever search for so for instance if I wanted to look for Toy Story we can see that my results are going to pop in with Toy Story now if you were paying attention that wasn't a video glitch you might have seen a flicker for the results getting popped in and if I type toy here for instance we can see that what's actually happening is we're getting a new search request for every single time I type in a new letter and we can see here the ending result here isn't actually the best results for toy the reason is all these requests might come back at different times it's not guaranteed that for every single letter it's going to come back in the same order so we end up getting a wrong result because it was from an earlier point in time in that search now the way that this is currently working is anytime that input changes we have this onchange event handler and what that's going to do is it's going to grab the value from that input and it's going to set it into State it's also going to kick off a respon or API request to that search endpoint but ultimately what we want to happen is we want to make sure that we're actually managing all these different requests that we're making if we create a new request after the T for instance to we want to make sure that we cancel that previous request for just the T so that we don't unexpectedly get the result for T later on so let's actually dig in and see how we can actually manage these fetch requests using the abort controller so I'm going to create a new constant called controller I'm going to set that equal to new abort controller and then I ultimately need to pass a controller signal to my fetch request so I'm going to create a new constant of signal and set that equal to controller. signal and then since I already have an object with all my options for this fetch request I can just pass this in as is to the fetch now just to make sure everything is still working as expected if I type in toy we can see that I still get those search requests so this hasn't broken or changed anything it's still working as it was before but now we have the ability to use this controller in order to a border request but we have one issue here currently this controller is scoped to this handle on change function and the reason this is an issue is because it has no possible way of having any context of other instances of that handle on change being fired so just to kind of think about this out loud every single time we type in a new character this function will fire and every time this function fires it's creating a new constant of controller so that means we don't really have any way of detecting that another one one had already fired previously so what we're going to actually do is lift this controller up to a higher level so that we can have access to whether or not a controller already exists now to do this we're going to store it using the ref API and what we can do is we can first import use ref from react but then what I'm going to do is I'm going to create a constant called controller ref and set that equal to use ref now instead of creating this new constant of controller here what I'm going to do is I'm going to set controller ref. current equal to this new controller so anytime that this fires it's going to now store this new abort controller inside of my existing controller ref but as we can see here we're currently getting a type error so back up inside of our used ref instance we need to make sure that we set that type appropriately which is going to be a boort controller but now we also need to update where we're accessing the signal so I'm going to now replace the controller with the current instance and just as a quick sanity check everything is still working but now what I want to happen is anytime this function F fires I want to first check if a controller already exists and if a controller already does exist I want to First abort that so before I set this current value I'm going to first say if controller. current I'm going to fire controller ref. current. abort using the abort method but if it doesn't exist or even if it does exist and it does get aborted we're then going to still continue to create that new abort controller where we then can then pass in that signal to fetch so now we can start to see what happens when I type in toy where I have these two aborted requests that happen before my final request from that Y which includes that full word of toy so what this means it's no longer possible for one of those first two requests to come back after my final search request and give me invalid results for my final query now this works really well for any use case if I start to type in other things we can see that it's aboring those previous requests and only giving my final one but if I go to the console it looks like we're getting a bunch of Errors for uncaught uncaught dumb exceptions now the issue is this is currently throwing an error and we're not currently catching any of those errors inside of our code now there's different ways for how we can catch that error including just chaining on a catch at the end of this fetch but I personally like to use the try catch block even though I know a lot of people give it hate but what we can do is we can wrap this entire block with a catch and we can just console log this out for now not that we actually need it but just to kind of see what's happening inside of the console But ultimately what's going to happen is we're going to try to make that fetch request if we succeed we'll continue on by grabbing the Json and actually setting the results with it but if it gets thrown we're going to catch it and currently I'm going to console log but after we see what that actually looks like we can just simply do nothing so now when I start to type out monster we can see we get those aborted requests but we also get those Dom exceptions that are now coming in as a console log instead and if I go ahead and clean that up we can see that instead we still get those aborted request but we no longer get those errors now generally speaking though this is a good opportunity for being want to provide some kind of error handling inside of your application now the Dom exception is something that we're intentionally throwing so you want to make sure that we're not responding to that in some kind of way but say that the API broke this is a good opportunity to add some kind of handling for that and also another thing to consider is the abort controll is just one option that we have for being able to build experiences like this where maybe we want to also be able to throttle or to bounceing on change to prevent the request in the first place but having both tools gives us a lot of flexibility for how we manage our experience next up let's see how we can further enhance our search experience in react app by adding autocomplete for our search input

Channel: Colby Fayock

Views: 6,940

Keywords: fetch abort, fetch abortcontroller, react fetch api, react fetch, react fetch abortcontroller, abortcontroller react, abortcontroller, abortcontroller fetch, abortcontroller in javascript, cancel requests javascript, react fetch cancel request, cancel fetch request, abort fetch, abort fetch request, abort fetch request javascript, abort api request, cancel api call react

Id: VdAlFWBUGV4

Length: 6min 37sec (397 seconds)

Published: Thu Oct 12 2023