JS synchronous api request

Question

So I'm trying to de-jquery my code. Currently I use a jquery ajax function tith the parameter "async" set to false.

That looks something like this

$.ajax({
    ...
    async: false,
    ...
    success:function(data) {
        list = JSON.parse(data);
    },
    error:function(data){
      console.log(data);
    }
});

I now tried to follow the lovely moz-docs on how to fetch the data in vanilla js, but everything seems to be asynchronous, which breaks the rest of my code.

How can I fetch the data from my (local) API synchrounously?

This is my current (not working) approach

function postData(url = '', data = {}) {
        // Default options are marked with *
        const response = fetch(url, {
            method: 'POST', // *GET, POST, PUT, DELETE, etc.
            mode: 'cors', // no-cors, *cors, same-origin
            cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
            credentials: 'same-origin', // include, *same-origin, omit
            headers: {
                'Content-Type': 'application/json'
                // 'Content-Type': 'application/x-www-form-urlencoded',
            },
            redirect: 'follow', // manual, *follow, error
            referrerPolicy: 'no-referrer', // no-referrer, *client
            body: JSON.stringify(data) // body data type must match "Content-Type" header
        });
        return response.json(); // parses JSON response into native JavaScript objects
    }

    var einzelhandel = [];

    postData('src/php/api/getDataEinzelhandel', {})
        .then((data) => {
            einzelhandel = data;
        });

Making synchronous requests with `fetch` is not possible. You can try with `XMLHttpRequest` but even then, modern browsers have deprecated the feature. — Phil, Apr 07 '20 at 09:24
let data = await response.json() see here: https://dev.to/shoupn/javascript-fetch-api-and-using-asyncawait-47mp for example — developer, Apr 07 '20 at 09:24
You can fix your code quite easily by using `return fetch(url, { /* big old options object here */ }).then(res => res.json())`. That's really all you need — Phil, Apr 07 '20 at 09:25
@deceze nore was the original code - it uses the call back - but they can then add a "then" to this code and add their call back there — developer, Apr 07 '20 at 09:29
@developer OP would also need to change to using an async function. Good example link though — Phil, Apr 07 '20 at 09:29

JS synchronous api request

0 Answers0