Run results for: Native XHR vs Fetch (async/await - try/catch)

Run details:

User agent: Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36

Browser: Chrome 87

Operating system: Linux

Device Platform: Desktop

Date tested: 3 years ago

Script Preparation code:

function showResult(data) {
    //console.log(data);
}
var newUrl = "https://www.googleapis.com/discovery/v1/apis";

Tests:

Native XHR
try { var xhr = new XMLHttpRequest(); xhr.open("GET", newUrl, true); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { showResult(xhr); } } xhr.send(); } catch (error) { console.log(error); } finally { // done }
Native XHR (try/catch)
var xhr = new XMLHttpRequest(); xhr.open("GET", newUrl, true); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { showResult(xhr); } } xhr.send();
Fetch (promise)
var request = fetch(newUrl).then(showResult);
Fetch (async/await)
var testThis = async function() { var response = await fetch(newUrl); var data = await response.json(); return data; } testThis().then(function(data){ showResult(data); });
Fetch (async/await - try/catch)
var testThis = async function() { try { var response = await fetch(newUrl); var data = await response.json(); } catch (error) { console.log(error); } finally { return data; } } testThis().then(function(data){ showResult(data); });