Javascript/ReactJS .then() 的执行执行得太早

Question

这个问题已经有答案了:

Why does the setInterval callback execute only once? (2 个回答)

已关闭 3 年前。

一旦 POST-fetch 成功执行，我想重新渲染我的 React 组件。但是，当我 console.log 执行时间时，我注意到执行顺序已关闭。我使用以下代码来获取时间:

function getTime(input) {
  var date = input ? new Date(input) : new Date();
  return {
      hours : date.getHours(),
      minutes : date.getMinutes(),
      seconds : date.getSeconds(),
      milliseconds : date.getMilliseconds()
  }
}

在主组件中，我想在获取后重新渲染，我调用以下函数，该函数是从单独的rest.js 文件导入的:

fetchPushNewCourse(finalEvents).then(console.log("then 2 performed at", this.getTime()));

函数本身如下所示:

export async function fetchPushNewCourse(args){
  await fetch(`/calendar/post`, {
    method: "POST",
    body: JSON.stringify({ message: args }),
    headers: {
      "Content-Type": "application/json"
    }
  }).then(res => {
    console.log("then 1 performed at", getTime())
    return res.json();
  })
}

我希望“then 2”仅在执行提取后被console.logged，但它总是提前大约一秒执行。我似乎对 Promise 的工作原理有一个基本的误解。

Answer 1

您没有使用 console.log('then 2') 传递 lambda，而是在声明位置调用它。

它很容易修复:

fetchPushNewCourse(finalEvents).then(() => console.log("then 2 performed at", this.getTime()));