snowberb – 10-37 Jun 15

Im trying to use AbortController but I cant find out how it really works. If I put it before the fetch, the fetch request gets ignored, it doesnt even start. And if I put it after the fetch, it will simply await the call without aborting. Any ideas?
const controller = new AbortController()

const handleInputChange = async (values) => {
controller.abort()
await fetch({values, signal})
}

return <Select onChange={handleInputChange} />
const controller = new AbortController()

const handleInputChange = async (values) => {
controller.abort()
await fetch({values, signal})
}

return <Select onChange={handleInputChange} />
L
lebouwski305d ago
calling abort will reject the promise what are you trying to do?
S
⛄Snowberb⛄305d ago
every time I pick a value on the select I have to make a patch I just want to cancel the previous request if it didnt finish and the user selects a new value
L
lebouwski305d ago
const controllerRef = useRef()

const handleInputChange = async (values) => {
if (controllerRef.current) controllerRef.current.abort();
controllerRef.current = new AbortController();
await fetch({values, signal: controllerRef.current.signal })
controllerRef.current = undefined;
}

return <Select onChange={handleInputChange} />
const controllerRef = useRef()

const handleInputChange = async (values) => {
if (controllerRef.current) controllerRef.current.abort();
controllerRef.current = new AbortController();
await fetch({values, signal: controllerRef.current.signal })
controllerRef.current = undefined;
}

return <Select onChange={handleInputChange} />
S
⛄Snowberb⛄305d ago
why ref?
L
lebouwski305d ago
to keep it for when you rerender
S
⛄Snowberb⛄305d ago
it works thank you but I dk how I could have thinked of using ref
L
lebouwski305d ago
on the second call to handleInputChange you need to call the abort controller for the previous request, so it needs to be kept outside of the function, but created inside
S
⛄Snowberb⛄305d ago
okay I get that
UU
Unknown User304d ago