UI 仅在第二次点击时更新

Question

我需要创建一个使用 vanilla JS、Web API(OpenWeather API) 和用户数据动态更新 UI 的异步网络应用程序。完成得很快，除了一个问题：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);
  }
};

Answer 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 和 returns 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()); 
}

Answer 2

然后直接添加到postData:

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

或添加return

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

UI 仅在第二次点击时更新

the UI updates only at the second click

javascript

asynchronous