Javascript 如何使用fetch（）将来自服务器的数据填充到变量中？

我有一个函数，它从OpenWeatherAPI获取数据，并为一些HTML元素的innerText属性赋值。这部分很好用

但我还需要将其中一个值（

data[“main”][“temp”]

）存储到对象的属性（

userData.temp

）中

在我的代码末尾，有一个函数

generate（）

，由单击事件触发，它调用

getWeatherData（）

，然后通过调用函数

postProjectData（userData）

将

userData.temp

发布到服务器

但是，首次调用此单击事件时，服务器的属性变为空。第二次，它与上一次迭代的值一起使用。也就是说，这也是一次迭代

我假设这是因为当浏览器进入

getWeatherData（）

内部的

fetch

时，由于它是一个异步函数，它会转到

postProjectData（userData）

；只有在这之后，

fetch

才会实际填充属性

我想对了吗？

---

如何在适当的迭代中填充属性？

您的问题是，您没有等待数据到达后将其发布到服务器。您可以重构

getWeatherData

和

generate

，使之成为现实

第一件事是从

getWeatherData

返回一个承诺，以便您可以等待数据被提取：

const getWeatherData = () => new Promise((resolve, reject) => {
  let zipInputValue = document.getElementById("zip").value;
  const weatherUrl = `http://api.openweathermap.org/data/2.5/weather?zip=${zipInputValue},${weatherCountryCode}&units=metric&appid=`;

  fetch(weatherUrl + weatherApiKey).then((res) => {
    if (res.status != 200) {
      console.log("Looks like there's been a problem.");
      return reject();
    }
    res.json().then((data) => {
      descriptionElement.innerText = "Weather: " + data["weather"][0]["description"];
      currenttempElement.innerText = "Temperature:" + data["main"]["temp"] + " °C";
      userData.temp = data["main"]["temp"];
      mintempElement.innerText = "Min.:" + data["main"]["temp_min"] + " °C";
      maxtempElement.innerText = "Max.:" + data["main"]["temp_max"] + " °C";

      resolve();
    });
  });  
  console.log(userData.temp);
});

这里的要点是解决/拒绝让函数调用方（在本例中为

生成
）获取数据的承诺

然后我们重构
生成
：

async function generate() {
  await getWeatherData();
  console.log("test");

  userData.date = newDate;
  userData.userResponse = getUserResponse();

  postProjectData(userData);

  getProjectData();
}

其思想是将
generate
转换为异步函数，使其等待数据到达（
getWeatherData
），以便调用
postProjectData

/*---------- Post Data to the Server ---------- */

const postProjectData = async (userData) => {
  const rawResponse = await fetch("http://localhost:8080/addData", {
    method: "POST",
    body: JSON.stringify(userData),
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
  });
  const response = await rawResponse.json();
  return response;
};

/*---------- Generate Entry ---------- */

const btn = document.getElementById("generate");
btn.addEventListener("click", generate);

function generate() {
  getWeatherData();
  console.log("test");

  userData.date = newDate;
  userData.userResponse = getUserResponse();

  postProjectData(userData);

  getProjectData();
}

async function generate() {
  await getWeatherData();
  console.log("test");

  userData.date = newDate;
  userData.userResponse = getUserResponse();

  postProjectData(userData);

  getProjectData();
}