Execution order within JS script

Question

I am currently trying to create a website which gets its information live from an API. For this, I am now trying to change a variable based on the API call. while playing around with the JS code I realized, that the order of execution is not as expected.

var url = "https://api.worldoftanks.eu/wot/globalmap/clanprovinces/?application_id=bbdd3a54ffe280ff581db61299acab9c&clan_id=500071433&fields=province_id%2C+daily_revenue%2C+province_name%2C+revenue_level";


var a = 10;

fetch(url)
.then(res => res.json())
.then((out) => {
changeProvinceName(out.data[500071433][0]);
})
.catch(err => { throw err });

function changeProvinceName(json){
  console.log(json.province_name);
  document.getElementById("province_name1").innerHTML = "<h2>"+json.province_name+"</h2>";
  province=""+json.province_name;
  a = 20;
}

console.log(a);

I am not sure why it is creating the console.log(a) first and then gets the API request.

Is there a possibility where I can run the API call first in order to use the modified value of a.

For all the code including HTML and CSS have a look at my Github repo for this project.

fetch() is asynchronous. It starts the operation and returns immediately. The functions passed to .then() will be called when the HTTP request completes. — Pointy
– Pointy, Commented Jul 22, 2018 at 19:01
So how would I make the script wait until the Request is completed so I can work with the new data? — Ironlors
– Ironlors, Commented Jul 22, 2018 at 19:06
everything inside the .then happens after the request completes, while everything outside the .then happens while the request is happening. this is what makes asynchronous code able to be non blocking. — Claies
– Claies, Commented Jul 22, 2018 at 19:09
You don't. Instead you do your work inside the .then() callback (or by calling other functions from there). — Pointy
– Pointy, Commented Jul 22, 2018 at 19:09

Willem van der Veen · Accepted Answer · 2018-07-22 19:13:04Z

1

fetch(url) is async. In javascript first all synchronous code is executed then after this is finished the async code will be executed in the event loop.

Because console.log(a); is synchronous first this will be executed and after this the async promise.then(). Also take a look into promises which is a Javascript construct which helps to deal with async code.

You can run your code also in a .then() of the promises like this:

fetch(url)
.then(res => {
 a = 10;
 return res;
})
.then(res => res.json())
.then((out) => {
changeProvinceName(out.data[500071433][0]);
})

Here is another example of how you can influence a variable during the execution of a promise. A understanding of how promises work is required though:

let hey = new Promise((res, rej) => {
  res(5);
});

hey.then((res) => {
  res += 5;
  return res;
}).then((res) => {
  console.log(res);
});

edited Jul 22, 2018 at 19:13

answered Jul 22, 2018 at 19:07

Willem van der Veen

37.1k19 gold badges208 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Execution order within JS script

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related