javascript - JS脚本中的执行顺序

Question

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

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 请求。

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

对于包括 HTML 和 CSS 在内的所有代码，请查看我的 Github repo对于这个项目。

Answer 1

fetch(url) 是异步。在 javascript 中，首先执行所有同步代码，然后在完成后 async 代码将在 event loop 中执行。 .

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

您也可以像这样在 .then() 中运行您的代码:

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

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

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

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