UI 仅在第二次单击时更新答案

【问题标题】：the UI updates only at the second clickUI 仅在第二次单击时更新
【发布时间】：2022-11-11 14:28:19
【问题描述】：

我需要创建一个使用 vanilla JS、Web API(OpenWeather API) 和用户数据来动态更新 UI 的异步 Web 应用程序。它很快完成，除了一个问题：UI 仅在第二次单击生成 Btn 时更新，我不知道错误可能在哪里？请帮助我。

Project screencut

const d = new Date();
const newDate = d.toDateString();

const baseURL =
  "http://api.openweathermap.org/data/2.5/weather?units=imperial&zip=";
const apiKey = "&appid=b0c6dd1560b603095aed754d5d1756d0&units=imperial";


document.getElementById("generate").addEventListener("click", performAction);


function performAction(e) {
  const feelings = document.getElementById("feelings").value;
  const newZip = document.getElementById("zip").value;

  getWeather(baseURL, newZip, apiKey)
    .then(function (data) {
      postData("/addData", {
        name: data.name,
        date: newDate,
        temp: data.main.temp,
        feelings: feelings
      });
    })
    .then(updateUI());
}


const getWeather = async (baseURL, newZip, apiKey) => {
  const request = await fetch(baseURL + newZip + apiKey);

  try {
    const allData = await request.json();


    if (allData.message) {
      alert(allData.message);
    } else {
      return allData;
    }
  } catch (error) {
    console.log("error", error);
  }
};



const postData = async (url = "", data = {}) => {
  const res = await fetch(url, {
    method: "POST",
    credentials: "same-origin",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
  });

  try {
    const newData = await res.json();
    return newData;
  } catch (error) {
    console.log("error", error);
  }
};


const updateUI = async () => {
  const req = await fetch("/all");
  try {
 
    const allData = await req.json();
    document.getElementById("name").innerHTML = allData.name;
    document.getElementById("date").innerHTML = allData.date;
    document.getElementById("temp").innerHTML =
      Math.round(allData.temp) + " degrees fahrenheit";
    document.getElementById("content").innerHTML = "I am feeling "+allData.feelings;
  } catch (error) {
    console.log("error", error);
  }
};

【问题讨论】：

请只写问题（所以你的作业并不重要）。
好的，我编辑了它。

标签： javascript asynchronous

【解决方案1】：

问题出在performAction 函数中：

function performAction(e) {
  const feelings = document.getElementById("feelings").value;
  const newZip = document.getElementById("zip").value;

  getWeather(baseURL, newZip, apiKey)
    .then(function (data) {
      postData("/addData", {
        name: data.name,
        date: newDate,
        temp: data.main.temp,
        feelings: feelings
      });
    })
    .then(updateUI());
}

一旦getWeather 解决，传递给then 的回调只调用postData 并返回undefined 导致第二个then 的回调提前执行。

只需在postData 之前添加一个return 关键字，然后将第二个then 块从then(updateUI()) 更新为then(updateUI) 或then(() => updateUI())。

function performAction(e) {
  const feelings = document.getElementById("feelings").value;
  const newZip = document.getElementById("zip").value;

  getWeather(baseURL, newZip, apiKey)
    .then(function (data) {
      return postData("/addData", {
        name: data.name,
        date: newDate,
        temp: data.main.temp,
        feelings: feelings
      });
    })
    .then(() => updateUI()); 
}

【讨论】：

您好，谢谢您的回复，我添加了退货，但似乎没有任何变化...
@Qin 你也更新了 then 块吗？
一千谢谢你！现在可以了！你拯救了我的一天！:-)

【解决方案2】：

然后直接添加到 postData：

postData("/addData", {
        name: data.name,
        date: newDate,
        temp: data.main.temp,
        feelings: feelings
      }).then(updateUI);

或添加退货

getWeather(baseURL, newZip, apiKey)
    .then(function (data) {
      return postData("/addData", {
        name: data.name,
        date: newDate,
        temp: data.main.temp,
        feelings: feelings
      });
    })
    .then(updateUI);

【讨论】：

【解决方案3】：

我在这个项目上遇到了同样的问题。我在 updateUI 调用周围添加了一个函数，它修复了它：

.then(function { updateUI() }

我不确定为什么会这样，但确实如此。

【讨论】：