How to make javascript fetch synchronous?

Question

I'm using fetch to get data json from an api. Works fine but I have to use it repeatedly for various calls, thus it needs to be synchronous or else I need some way to update the interface when the fetch completes for each component.

function fetchOHLC(yUrl){
    fetch(yUrl)
    .then(response => response.json())
    .then(function(response) {
                alert(JSON.stringify(response.query));

            var t = response.created;
            var o = response.open;
            var h = response.high;
            var l = response.low;
            var c = response.close;
        
        return {t,o,h,l,c};
    
    })
    .catch(function(error) {
        console.log(error);
    });    
}

var fetchData = fetchOHLC(yUrl);
alert(fetchData); // empty ?

Is there any other way to achieve it other than using fetch? (I don't want to use jquery preferrably).

Thanks

Edit

The question is about fetch-api, not ajax, not jquery, so please stop marking it as duplicate of those questions without reading it properly.

Answer 1

fetch is intended to do asynchronous calls only, but there are some options:

Option 1

If XMLHttpRequest is also fine, then you can use async: false, which will do a synchronous call.

Option 2

Use async/await which is asynchronous under the hood, but feels like it is synchronous, see https://stackoverflow.com/a/54950884/2590616

Option 3

or else I need some way to update the interface when the fetch completes for each component

This sound like fetch + Promise.all() would be a good fit, see https://stackoverflow.com/a/52013616/2590616

Option 4

If you want to send analysis data or session data when leaving a page (e.g. in onbeforeunload) and want to be sure that the data is sent to the server, which is not guaranteed with a normal asynchronous AJAX call, you can use the Beacon API with Navigator.sendBeacon().

Answer 2

If you don't want to use the fetch api you will have to use callbacks, event listeners, XMLHttpRequest.

Answer 3

You always can use the old fashion way using xhr. Here a example of a request.

   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML = this.responseText;
       }
     };

   xhttp.open("POST", "cookies.php", true);
   xhttp.send();

Answer 4

You simply need to add callback function as parameter.

function fetchOHLC(yUrl, callback){
    fetch(yUrl)
    .then(response => response.json())
    .then(function(response) {
            alert(JSON.stringify(response.query));

            var t = response.created;
            var o = response.open;
            var h = response.high;
            var l = response.low;
            var c = response.close;
        
            callback({t,o,h,l,c});
    
    })
    .catch(function(error) {
        console.log(error);
        callback(null, error);
    });    
}

fetchOHLC(yUrl, function(response, error){
    if (response == null) {
        console.log(error);
    } else {
        var fetchData = response;
        alert(fetchData);
    }
});

Answer 5

This is how I have implemented and it's working perfectly fine. The real hero here is the JS fetch API.

var url = "http://excample.com/get/bytes"
var audio;
audio = $('audio');

fetch(url, {
    method: 'GET',
    headers: {
        'Authorization': 'Bearer ABCDEFGHIJKLMNO'
    }
}).then(response => {
    response.blob()
        .then(blob => {
            const objectUrl = URL.createObjectURL(blob);
            audio[0].src = objectUrl;
        }).catch(e => {
            console.error(e);
        })
}).catch(error => {
    console.error(error);
});

Answer 6

If you came here because you dropped "how to make javascript fetch synchronous" into a search engine:

That doesn't make much sense. Performing network operations is not something which requires CPU work, thus blocking it during a fetch(...) makes little sense. Instead, properly work with asynchrony as shown in the duplicate linked above.

---

In case you really need a synchronous request (you don't), use the deprecated XMLHttpRequest synchronous variant, to quote MDN:

Note: Starting with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), Blink 39.0, and Edge 13, synchronous requests on the main thread have been deprecated due to their negative impact on the user experience.

const request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
request.send(null);

You can find more information on MDN.