UI僅在第二次單擊時更新

我需要創建一個使用 vanilla JS、Web API(OpenWeather API) 和用戶資料來動態更新 UI 的異步 Web 應用程式。它很快完成，除了一個問題：UI 僅在第二次單擊生成 Btn 時更新，我不知道錯誤可能在哪里？請幫助我。

專案截圖

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);
  }
};

uj5u.com熱心網友回復：

問題出在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回呼提前執行。

只需在之前添加一個return關鍵字并將第二個塊從topostData更新為或。thenthen(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()); 
}

uj5u.com熱心網友回復：

然后直接添加到 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);

標籤：javascript 异步

上一篇：在createAsyncThunk中向異步函式添加型別

下一篇：不允許在用sync_to_async()轉換的函式上呼叫異步