如果我在 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如果我在 index.html 的脚本标记中使用异步，我是否需要费心在 scripts.js 中编写异步代码？我要javascript
【发布时间】：2021-09-02 14:40:43
【问题描述】：

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

<!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 关键字的功能和script 标签上的async 属性做不同的事情。

标签： javascript async-await promise script

【解决方案1】：

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

脚本标签上的async 属性意味着脚本不会阻止渲染——浏览器不会等待页面完成下载和执行脚本，然后继续渲染 HTML 的后面部分。如果您在脚本标签下方有其他内容，这将很有帮助，例如

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

（如果脚本标签下方没有更多内容，则该属性实际上并没有什么用处）

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

该函数将始终返回一个 Promise
如果您从函数内部返回一个值，返回的 Promise 将解析为该值
你可以在 async 函数中使用 await 以相对干净的方式解析其他 Promise，语法上不使用 .then

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

【讨论】：

Nit: await 不会解决您通过它的承诺，它只是等待它解决。（我也会在其上方使用“满足该值”，但技术上“解决为”也是正确的。:-)）
还请说明何时需要异步。我看到这么多异步脚本，对它的需求为零