JS脚本中的执行顺序

问题描述

我目前正在尝试创建一个从 API 实时获取信息的网站.为此，我现在尝试根据 API 调用更改变量.在玩弄 JS 代码时，我意识到执行顺序与预期不符.

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);

我不知道为什么它首先创建 console.log(a) 然后获取 API 请求.

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

是否有可能我可以先运行 API 调用以使用 a 的修改值.

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

对于包括 HTML 和 CSS 在内的所有代码，请查看我的 用于此项目的 Github 存储库.

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

推荐答案

fetch(url) is async.在 javascript 中，首先执行所有同步代码，然后在完成后 async 代码将在 事件循环.

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.

因为console.log(a);首先是同步的，这将被执行，然后是异步 promise.then().另请查看 promises 这是一个 Javascript有助于处理异步代码的构造.

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.

您也可以在 .then() 的 promise 中运行您的代码，如下所示:

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]);
})

这是另一个示例，说明如何在执行 Promise 期间影响变量.不过，需要了解 Promise 的工作原理:

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);
});

这篇关于JS脚本中的执行顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！