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

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.

Original answer for the question:

You want your fetch function to return sth:

function fetchOHLC(yUrl){     return 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);     });     } 

Now fetchData contains a promise, which can be easily used:

var fetchData = fetchOHLC(yUrl); fetchData.then(alert); //not empty ! its {t,o,h,l,c} 

---

If you want some fancy ES7, you could rewrite the whole thing like this:

async function fetchOHLC(yUrl) {   try {     const res = await ( await fetch(yUrl) ).json();     alert(JSON.stringify(r.query));     return {t:r.created,o:r.open,h:r.high,l:r.low,c:r.close};   } catch(e) { console.log(e); } }  (async function () {   const fetchData = await fetchOHLC(yUrl);   alert(fetchData); })()