Fetch APIs - Is it blocking or non-blocking code?

user_5753035 0
Viewed 11283

I've been looking at the Fetch API for a couple of days now.

While learning I came across the statement "using fetch() doesn't block your DOM " as it uses promises.

Happily moving forward with these tutorials and checking out some new ones, I saw a guy stating "using fetch() does block your DOM" in a presentation.

Can anyone educate me which one of the two it is?

promise ecmascript-6 fetch-api dom javascript
4 Answers

If by blocking you mean, other scripts and requests cannot run until its request completes: no.

If you mean preventing the page load from completing: yes, it appears to block.

Here are some tests I made some to compare to demonstrate, requesting a search to google of: what are dogs?

fetch() which does appear to block window.onload completion https://jsfiddle.net/84uopaqb/7/

XMLHttpRequest, which does not block window.onload completion https://jsfiddle.net/84uopaqb/5/

$.get() which also does not block window.onload completion https://jsfiddle.net/84uopaqb/1/

If you must use fetch, wrapping the fetch request in a setTimeout is a workaround to this issue.

Caveat: I've only tested this in FF Quantum, and not very thoroughly either... but that being said, you should support all major browsers. Even if it's non-blocking in other browsers, its still not a viable solution.

user_17331710
Related