如果我在 index.html 中的脚本标记中使用异步,我是否需要在 scripts.js 中编写异步代码?我要 javascript

If I use async in my script tag in index.html do I need to bother with writing async code in scripts.js? I am asking for javascript

我是 JavaScript 的新手。我了解到,我可以通过在 html 脚本标记中将单词 async 放在前面来使我的脚本异步。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>    

<script async src="scripts.js"></script>
</body>
</html>

但是我在另一个视频中看到我需要使用回调/Promises/Async-await 来使我的代码异步。

 const friendlyFunction = async ()=> {
     return `Hello`
 }

 console.log(friendlyFunction)

有区别吗?

这是两个完全独立的概念。

脚本标签上的 async 属性意味着脚本不会被呈现阻塞 - 浏览器不会等待脚本负载完成下载并完成脚本执行后再继续呈现HTML 的后期部分。如果您在脚本标签下还有其他内容,这将很有帮助,例如

<script async src="scripts.js"></script>
<div>more HTML content here</div>

(如果脚本标签下面没有更多内容,该属性实际上没有任何用处)

相比之下,在 JavaScript 函数前使用 async 关键字将意味着

  • 函数总是return一个Promise
  • 如果您 return 来自函数内部的值,returned Promise 将解析为该值
  • 您可以在异步函数中使用 await 以干净、语法平坦的方式解析其他 Promise,而无需 .then

它们是同一个词 async 的完全不同用法。您可能想使用 async 属性,或者您可能想在某些情况下使用异步函数,或两者都使用,或两者都不使用。