Multiple simultaneous $ajax calls to the same URL cancels the request

[SmileyChris]

I have a situation where a websocket was sends updates back to the browser.
These send a window custom message that alpine is listening for and then triggering an $ajax to update some stuff.
If I get two updates at the same time, the request is cancelled.

[SmileyChris]

If these messages occur over time, it's fine, hence why I think it's only when there are simultaneous requests.

Here's an example of three requests working fine if they don't happen at the same moment:

[imacrayon]

Hey thanks for reporting this. So the intended behavior is that a request will be cancelled if a new request is issued that targets the same element.
In the code a “stale” request is cancelled using the _ajax_abort method. I think there might be a race condition somewhere that is causing this method to run too soon.
I can take a look into it later this week, but if anyone wants to dive in, I’d welcome a PR too.

[SmileyChris]

I found another similar situation with a search field. Because I had the @search, it was triggering two times simultaneously if I press enter, entirely cancelling the request. Worse is that it's cancelled forever: that search phrase never works again until a refresh.

        <form
          method="GET"
          action="."
          role="search"
          x-init
          x-target="games"
        >
          <input
            type="search"
            placeholder="Search games..."
            name="q"
            value="{{ text_filter|default:'' }}"
            @input.debounce="$el.form.requestSubmit()"
            @search="$el.form.requestSubmit()"
          />
        </form>

Now granted, the fix is to just get rid of the @search event handler. But I can reproduce it without this by hitting enter rapidly even after this line is removed. Again, once it is cancelled, it never works again.

[SmileyChris]

Failing here:


Triggering when the second hit (which is correctly loaded from ResponseCache) hits response = await pending -- is this the browser aborting the request if you await an already promised fetch?

(answering my own question, no it's definitely the library doing something with the AbortController and _ajax_abort)

[imacrayon]

I found another similar situation with a search field.

Thanks for this reproduction, that helps narrow things down. Sorry for the delay in getting to this, I wonder if there's an issue where _ajax_abort is being defined. The method gets defined on a targeted DOM Element, so if two requests share the same target element _ajax_abort will get redefined mid-request. Something might be screwing up in that case.

[imacrayon]

Alright, I'm able to reproduce this on my end. ResponseCache isn't being flushed when a request is aborted, so the aborted request will be re-used on every subsequent request. Working on a fix now...