Uncaught SyntaxError: missing ) after argument list when using Object.assign await

Question

我正在尝试使用 Observable 中的 D3 重现分组条形图。我是运行 Chrome 上的脚本，带有 D3.v5。

在脚本中我有：

var data = Object.assign(await d3.csv("https://gist.githubusercontent.com/mbostock/3887051/raw/805adad40306cedf1a513c252ddd95e7c981885a/data.csv",
    d3.autoType), {
    y: "Population"
});

当我运行它在HTML时，它显示以下错误：

Uncaught SyntaxError: missing ) after argument list

我在 Chrome 控制台上试过了，它工作正常。

HTML 文件内容：

<!DOCTYPE html>
<meta charset="utf-8">

<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>


var margin = {top: 10, right: 10, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
 

var data = Object.assign(await d3.csv("https://gist.githubusercontent.com/mbostock/3887051/raw/805adad40306cedf1a513c252ddd95e7c981885a/data.csv", d3.autoType), {y: "Population"});
 

</script>

成功后data应该是一个对象如下：

[{…}, {…}, {…}, {…}, {…}, {…}, columns: Array(8), y: "Population"]

Answer 1

您想要的是将代码从 Observable 笔记本移动到通用 JavaScript 脚本。在那种情况下，您不能像以前那样使用 await。

如果你看一下 MDN page，你会很清楚地看到：

The await operator is used to wait for a Promise. It can only be used inside an async function. (emphasis mine)

话虽这么说，这个 async 包含您的代码的函数将起作用：

(async function foo() {
  const data = Object.assign(await d3.csv("https://gist.githubusercontent.com/mbostock/3887051/raw/805adad40306cedf1a513c252ddd95e7c981885a/data.csv", d3.autoType), {
    y: "Population"
  });
  console.log(data)
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

由于笔记本的工作方式，该代码在 Observable 笔记本中运行：

Observable already supported async generators in a sense: you can also define a (synchronous) generator cell that yields promises. Observable waits until the previous promise resolves before pulling the next one from the generator. (source)

最后，关于您观察到代码在 Chrome 的控制台上运行：不仅仅是 Chrome，该代码在大多数现代浏览器的控制台中没有 async 也可以运行.解释是控制台中的代码默认包裹在async中。这是一个很好的阅读：https://medium.com/@tomsu/devtools-tips-day-7-the-simple-joys-of-async-console-578f4ce67df4

Answer 2

请使用

<script type="text/javascript">

而不是

<script>

Uncaught SyntaxError: missing ) after argument list when using Object.assign await

Uncaught SyntaxError: missing ) after argument list when using Object.assign await

object

d3.js

async-await

assign

observablehq