3

From this link it says

This API is provided by the DOM standard, and that's the entire API. It's deliberately generic so it can be used by other web standards and JavaScript libraries.

I assume every browser has its own implementation. However, it does not give a generic answer how this is handled under the hood.

This blog post explains how HTTP is stateless and someone with a goal of canceling a request should choose another protocol like gRPC.

Here is an example from the first link which is identical to what I am trying to do with my project. In my case I am making a put request for a file upload. (I am not interested in handling cancellation on the backend)

const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => controller.abort(), 5000);

fetch(url, { signal }).then(response => {
    return response.text();
}).then(text => {
    console.log(text);
});

One last link I also found unclear from the MDN docs. Any help explaining the behaviour would be helpful. Thanks in advance.

AbortController.abort() Aborts a DOM request before it has completed. This is able to abort fetch requests, consumption of any response bodies, and streams.

yokus
  • 145
  • 2
  • 10
  • 1
    "*This blog post explains how HTTP is stateless and someone with a goal of canceling a request should choose another protocol like gRPC*" - the author seems a bit confused. They mix the HTTP request with the requested action. Yes, HTTP does not allow cancelling/aborting/rolling back the action that was requested, at least not within/through the same API call. One needs to make a second, separate request to do that. But HTTP certainly does support aborting a request itself: you simply close the underlying connection. – Bergi Nov 16 '22 at 20:00
  • Code example given is from the first link I provided. My code piece makes the call with a put request. But since the question is more about how does the underlyings of AbortController works, I did not emphasize the HTTP method. Now I read your explanation of action vs request, I understood what you mean and thank you for that. Just to be sure, in this case part of the DOM API used to close the underlying connection and thus aborting the request is AbortController right? – yokus Nov 16 '22 at 20:28
  • 1
    You looked at https://dom.spec.whatwg.org/#abortcontroller-api-integration, but did you also have a look at https://fetch.spec.whatwg.org/? – Bergi Nov 16 '22 at 20:45
  • I just checked the fetch documentation you sent and following Request constructor->RequestInit->AbortSignal->abort/aborted and [related MDN page](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/abort) really made things clearer for me. Thank you very much for your help! – yokus Nov 16 '22 at 21:29
  • 1
    Your question is quite unclear. An AbortController is a very simple object,basically it exposes an abort() method which will trigger an event and set its signal's aborted status to true. Not much magics in there. It becomes interesting because other APIs will be able to check that status or listen to these events, under their hood. Now you talk only about fetch in your question, so we could extrapollate you want to know how the Fetch API makes use of that AbortController. But it seems you're even after something completely unrelated to AbortController: XHR already had a `cancel()` method. – Kaiido Nov 16 '22 at 23:57
  • I don't agree that it is _something completely unrelated to AbortController_ since I aim to use AbortController for cancelling a HTTP request. However, I can see what you mean and any help editing the question for clarification purposes is appreciated. – yokus Nov 17 '22 at 05:55

0 Answers0