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）为async。在javascript中，首先执行所有同步代码，然后在完成后，在event loop中执行async代码。

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

您还可以在.pron的.then（）中运行代码，如下所示：

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

这是另一个示例，说明如何在执行Promise期间影响变量。但是，需要了解诺言如何工作：

let hey = new Promise((res, rej) => {
  res(5);
});

hey.then((res) => {
  res += 5;
  return res;
}).then((res) => {
  console.log(res);
});

JS脚本中的执行顺序

1 个答案: