5 ms·

Wow, didn't even know about the Fetch API. XMLHTTPRequest, the API that changed software forever by igniting a wave of more powerful browser applications, is fi

Wow, didn't even know about the Fetch API. XMLHTTPRequest, the API that changed software forever by igniting a wave of more powerful browser applications, is finally going to be replaced. Funny that the last 20 years of the web were all built on this ridiculous API that Microsoft came up with to try and make Outlook work in a browser. Good riddance, but you will be missed. Not that any of us has used that disgusting API directly in the last 10 years.

coldtea 9y ago
>Not that any of us has used that disgusting API directly in the last 10 years. Well, duh. It was a lower level API, offering more control. Fetch isn't much better. Half-arsed at best, and also needs a higher level wrapper to achieve the same terseness as popular AJAX utility libs.
- untog 9y ago
  > Fetch isn't much better. Half-arsed at best, and also needs a higher level wrapper to achieve the same terseness as popular AJAX utility libs. Really? let response = await fetch('http://www.example.com'); let json = await response.json(); It's not not terse.
  - coldtea 9y ago
    That's just for a GET. Sending e.g. a JSON POST request requires you to specify the content type and to manually stingify the payload. It's better than XMLHttpRequest but not as terse as the tons of helper libraries that we used (instead of XMLHttpRequest) anyway...
nemothekid 9y ago
It's been around for 2 years, I noticed it when github released a polyfill. It's been great to rely on a standard function, than any of the libraries to make http requests.
- component 9y ago
  I still use on axios over fetch. Mainly because fetch doesn't have abort function. axios implements cancelable promise proposal that didn't go though TC39 Tho it has been a while since I checked TC39 status on fetch
  - mattwoodnyc 9y ago
    I also choose Axios over Fetch for now. I had the following post that made the case - https://medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5 https://medium.com/@thejasonfile/fetch-vs-axios-js-for-makin... Thoughts?
  - mhagemeister 9y ago
    Fetch requests do support cancelation for a while now through `AbortController`. See: https://developers.google.com/web/updates/2017/09/abortable-fetch https://developers.google.com/web/updates/2017/09/abortable-...
    - igvadaimon 9y ago
      Which doesn't work even in Chrome.
      - suprfsat 9y ago
        > await (()=>{ controller=new AbortController; req=new Request('https://httpbin.org/delay/10',{signal:controller.signal}); f=fetch(req); controller.abort(); return f;})() Uncaught (in promise) DOMException: The user aborted a request. (index):1 Uncaught (in promise) DOMException: The user aborted a request. VM80:1 Fetch failed loading: GET "https://httpbin.org/delay/10". > navigator.userAgent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.45 Safari/537.36"
  - thomasfoster96 9y ago
    Fetch is a Web API, not an ECMAScript language feature, so TC39 doesn’t have much to do with it. They do do Promises though and Cancellation is a Stage 1 proposal [0], so it’s more than a year away from standardization at best. WHATWG handles Fetch and their spec[1] was updated seven days ago. [0] https://github.com/tc39/proposals/blob/master/README.md https://github.com/tc39/proposals/blob/master/README.md [1] https://fetch.spec.whatwg.org https://fetch.spec.whatwg.org
realandreskytt 9y ago
We used to do that stuff using frames back in the day. You’d have a hidden frame, change its url and look at what that dom contains. At scale, too. I was amazed at all the hoo-haa around that “new” xmlhttp API
- dustinmoorenet 9y ago
  We did the same thing, and to dynamically pull in content into the parent context, we created our own script block tag. <div type="javascript">...</div> so that we could extract the JS and eval it in the parent context. The clunky thing was that you had to hand escape reserved html characters (&, <, etc) in your JS code. So many bugs...
- cicloid 9y ago
  Wow, then I think that I jumped directly to that hoo-haa since I didn't even consider the technique you are describing, I wasn't expecting today learning something from dynamic HTML past of the web. Thanks!
- simcop2387 9y ago
  Yea there were a few things like that to emulate it. Things like JSONP + document.write() were also very common, though very ugly.
ThoAppelsin 9y ago
Fetch API still cannot handle progress events, unfortunately, so it is not yet a backwards compatible replacement.
- molsson 9y ago
  And until recently it could abort() either, but Chrome/FF/Edge all have it now (yay!) and there is a polyfill for Safari/MSIE and old browsers: https://www.npmjs.com/package/abortcontroller-polyfill https://www.npmjs.com/package/abortcontroller-polyfill

coldtea 9y ago

>Not that any of us has used that disgusting API directly in the last 10 years. Well, duh. It was a lower level API, offering more control. Fetch isn't much better. Half-arsed at best, and also needs a higher level wrapper to achieve the same terseness as popular AJAX utility libs.

untog 9y ago
> Fetch isn't much better. Half-arsed at best, and also needs a higher level wrapper to achieve the same terseness as popular AJAX utility libs. Really? let response = await fetch('http://www.example.com'); let json = await response.json(); It's not not terse.
- coldtea 9y ago
  That's just for a GET. Sending e.g. a JSON POST request requires you to specify the content type and to manually stingify the payload. It's better than XMLHttpRequest but not as terse as the tons of helper libraries that we used (instead of XMLHttpRequest) anyway...

nemothekid 9y ago

It's been around for 2 years, I noticed it when github released a polyfill. It's been great to rely on a standard function, than any of the libraries to make http requests.

component 9y ago
I still use on axios over fetch. Mainly because fetch doesn't have abort function. axios implements cancelable promise proposal that didn't go though TC39 Tho it has been a while since I checked TC39 status on fetch
- mattwoodnyc 9y ago
  I also choose Axios over Fetch for now. I had the following post that made the case - https://medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5 https://medium.com/@thejasonfile/fetch-vs-axios-js-for-makin... Thoughts?
- mhagemeister 9y ago
  Fetch requests do support cancelation for a while now through `AbortController`. See: https://developers.google.com/web/updates/2017/09/abortable-fetch https://developers.google.com/web/updates/2017/09/abortable-...
  - igvadaimon 9y ago
    Which doesn't work even in Chrome.
    - suprfsat 9y ago
      > await (()=>{ controller=new AbortController; req=new Request('https://httpbin.org/delay/10',{signal:controller.signal}); f=fetch(req); controller.abort(); return f;})() Uncaught (in promise) DOMException: The user aborted a request. (index):1 Uncaught (in promise) DOMException: The user aborted a request. VM80:1 Fetch failed loading: GET "https://httpbin.org/delay/10". > navigator.userAgent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.45 Safari/537.36"
- thomasfoster96 9y ago
  Fetch is a Web API, not an ECMAScript language feature, so TC39 doesn’t have much to do with it. They do do Promises though and Cancellation is a Stage 1 proposal [0], so it’s more than a year away from standardization at best. WHATWG handles Fetch and their spec[1] was updated seven days ago. [0] https://github.com/tc39/proposals/blob/master/README.md https://github.com/tc39/proposals/blob/master/README.md [1] https://fetch.spec.whatwg.org https://fetch.spec.whatwg.org

realandreskytt 9y ago

We used to do that stuff using frames back in the day. You’d have a hidden frame, change its url and look at what that dom contains. At scale, too. I was amazed at all the hoo-haa around that “new” xmlhttp API

dustinmoorenet 9y ago
We did the same thing, and to dynamically pull in content into the parent context, we created our own script block tag. <div type="javascript">...</div> so that we could extract the JS and eval it in the parent context. The clunky thing was that you had to hand escape reserved html characters (&, <, etc) in your JS code. So many bugs...
cicloid 9y ago
Wow, then I think that I jumped directly to that hoo-haa since I didn't even consider the technique you are describing, I wasn't expecting today learning something from dynamic HTML past of the web. Thanks!
simcop2387 9y ago
Yea there were a few things like that to emulate it. Things like JSONP + document.write() were also very common, though very ugly.

ThoAppelsin 9y ago

Fetch API still cannot handle progress events, unfortunately, so it is not yet a backwards compatible replacement.

molsson 9y ago
And until recently it could abort() either, but Chrome/FF/Edge all have it now (yay!) and there is a polyfill for Safari/MSIE and old browsers: https://www.npmjs.com/package/abortcontroller-polyfill https://www.npmjs.com/package/abortcontroller-polyfill