除了糟糕的搜索排名，您可能会遇到谷歌搜索控制台关于第一次输入延迟的警告。在使用开发工具(性能选项卡，CPU图表)分析页面性能之后，您可能会发现JavaScript在CPU主线程上消耗时间。该JavaScript可能包含广泛支持的、但样式较老的、针对网络资源的XML HTTP请求(XHR)。
现代JavaScript不需要像XHR那样锁定CPU主线线程。新的模式还使请求和管理JSON数据变得更加容易。让我们看看如何使用一个简单的脚本来获取COVID-19统计数据并显示在浏览器中。
复制上面的源代码并将其粘贴到一个文本编辑器中。将它保存为本地文件在你的桌面上(或你会记得的地方)。确保为它提供.html扩展名，以便使用web浏览器轻松打开。双击新文件，或使用浏览器的[文件]→[打开文件]菜单项导航到新文件。
如果您连接到Internet，您应该会在页面上看到统计数据。我们的脚本从一个由几个记者管理的数据源获取JSON数据，然后解压缩它来更新页面DOM。定期刷新页面或访问它以跟踪最新的统计数据。
将函数赋值
在考虑这段代码时，跳过打开的HTML，看看脚本标记内发生了什么。JavaScript的第一行是一个语句，它将一个复杂的值——一个函数——赋给名称“getCovidStats”。
getCovidStats = async() => {
赋值是“getCovidStats”后面的第一个等号和第28行分号之间的所有内容:async() =>{…};
分号在这里结束赋值。
由于代码声明了一个async()函数，所以当我们引用getCovidStats时，我们需要以调用函数的形式这样做，这样才能使它工作。我们需要使用括号，正如在第29行中看到的那样:getCovidStats();
注意到我们是如何在函数之后命名getCovidStats()的吗?在函数的主要操作之后命名函数是一个好主意——标记函数的功能——作为一般的命名约定。这使得未来的程序员更容易理解我们的代码。它还使您在几个月或几年之后返回代码时更容易遵循自己的代码。
关于常量的注意事项
const关键字是’ constant ‘的简写，’ constant ‘是不应该更改的值的通用编程概念。在本例中，getCovidStats是一个常量。
不能在没有错误的情况下重新分配或声明JavaScript常量。JavaScript提供错误消息作为保护rails，让我们避免错误代码。这个条件迫使我们正确地使用常量。
当您编写常量值时，您将值“硬编码”到变量名，就像在石头上凿出它们一样。我们经常把函数写成常数变量，因为我们不希望函数的行为不可预测。
异步()函数
不用担心=>箭头——async()函数的主体是由一组大括号{}限定的，从第9行开始，从第28行结束。注意嵌套的try{}、catch{}和finally{}方法，它们也使用花括号作为边界定义。大括号内的代码是在调用这些函数或方法时运行的代码。
它们是按顺序调用的。
等待
我们的async()函数引入了一个在try块中使用的特殊的new关键字:await。当我们使用async() {await {code}}时，它意味着一个JavaScript“承诺”将最终在未来的某个时刻返回。使用await不会阻塞处理其他任务。在我们“等待”承诺的返回时，可以运行其他代码。
获取API
我们使用fetch()，它为指定为必需参数的URL返回一个Promise对象。带有承诺的fetch()等网络方法是很好的用例，因为网络连接是完全不可预测的。我们不希望我们的程序停止等待即时响应。我们希望继续前进，期待着承诺最终会回归。
关于浏览器支持的说明
Fetch API和带有await的async()函数是现代的JavaScript模式，旧浏览器并不总是支持它们，特别是非边缘IE浏览器。请注意针对目标市场编写代码的警告。
如果您需要支持旧的浏览器，那么可以考虑使用一种部署策略来提供具有填充特性的高级特性，或者优雅地将其降级为您的最低标准浏览器。
covid-19数据来源
我们使用的消息来源是由几个为主要新闻机构工作的记者提供的。它为简单的GET请求提供JSON响应。这对我们的目的是理想的。
有一些分散的数据源支持国际站点，这些站点可以对疫情进行惊人的可视化显示。查看这些数据的用途，并尝试找到一个开放的API可以生成PDF (WHO situation reports)或CSV (John Hopkins)，但为了简单起见，这里我们需要JSON。