javascript - React onclick 需要异步/等待吗？

Question

假设这就是我们所拥有的:

onClick={() => restrictOrders()}>

这是我们的异步函数

const restrictOrders = async () => {
  try {
    const result = await axios.post(`${config.dev_server}/something`);
    
  }catch(e){}
}

我需要将 onClick 更改为

onClick={async() => await restrictOrders()}>

结果是相同的，我在生产和本地测试了它，具有高和低的互联网速度，在服务器上添加了很长的超时，并且在所有情况下它似乎都在等待响应。

Answer 1

简短的回答 - 不，没有什么区别。

一般来说，await 基本上意味着“在继续执行其余代码之前等待此 Promise 解决”。但这意味着函数最终语句之前的 await 没有任何效果，因为在“wait”之后不需要发生任何事情。

作为一个简单的说明:

const sleep = (delay) => new Promise(resolve => setTimeout(resolve, delay));

const myFunction = async () => {
  console.log("before");
  await sleep(2000);
  console.log("after");
};

myFunction();

并且，正如您毫无疑问所期望的，“之前”和“之后”之间有 2 秒的延迟。

但是如果您不关心“之后”，那么您根本不需要 await:

const sleep = (delay) => new Promise(resolve => setTimeout(resolve, delay));

const myFunction = async () => {
  console.log("before");
  sleep(2000);
};

myFunction();

您可以在这里使用await，也许这是更好的做法，以防您以后想在之后添加一些内容 - 但绝对没有必要。 (当然，在这种微不足道的情况下，根本不需要 sleep 调用 - 但想象它是一个具有副作用的“真实”函数，例如发布到 API。)

这与你的 React 示例相同:

onClick={async() => await restrictOrders()}>

您正在等待匿名函数的最后一个(在本例中是唯一的)语句。由于之后您不需要等待执行任何操作，因此不使用 await 也没有什么坏处 - 所以最常见的是它不会完成，我想可以使内联函数表达式不那么冗长。