Uncaught SyntaxError: отсутствует ) после списка аргументов при использовании Object.assign await

Я пытаюсь воспроизвести сгруппированную гистограмму, используя D3 из Observable. Я запускаю скрипт в 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: отсутствует ) после списка аргументов

Я попробовал это на консоли 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>

В случае успеха данные должны быть объектом следующим образом:

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

object async-await d3.js observablehq assign
person Frank    schedule 02.07.2019    source источник
comment
Я также нашел эту ссылку полезной для меня, чтобы понять, как что-то делать с данными после асинхронного вызова d3.csv (или d3.json). stackoverflow.com/questions/9491885/ csv-to-array-in-d3-js/   -  person Frank    schedule 05.07.2019

Ответы (2)


arrow_upward
4
arrow_downward

Вам нужно переместить код из блокнота Observable в обычный сценарий JavaScript. В этом случае вы не можете использовать await, как вы это делали.

Если вы посмотрите на страницу MDN, вы очень четко увидите, что:

Оператор await используется для ожидания промиса. Его можно использовать только внутри асинхронной функции. (выделено мной)

При этом эта функция 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 уже поддерживает асинхронные генераторы в некотором смысле: вы также можете определить (синхронную) ячейку генератора, которая дает промисы. Observable ждет, пока предыдущее обещание разрешится, прежде чем вытащить следующее из генератора. (источник)

Наконец, что касается вашего наблюдения, что код работал на консоли Chrome: это не только Chrome, этот код будет работать без async в консоли большинства современных браузеров. Объяснение в том, что код в консоли по умолчанию обернут в async. Вот хорошее чтение: https://medium.com/@tomsu/devtools-tips-day-7-the-simple-joys-of-async-console-578f4ce67df4

person Gerardo Furtado    schedule 03.07.2019
comment
Большое спасибо за ваш ответ. Просто чтобы уточнить, разве d3.csv не является асинхронной функцией? Я погуглил и обнаружил, что это асинхронно. Вторые вопросы, я не понимаю, почему это работает в консоли google chrome, но не в чистом javascript. Не могли бы вы пролить свет на это? - person Frank; 03.07.2019
comment
Да, это асинхронно, но это не меняет того, как браузер работает с await. - person Gerardo Furtado; 04.07.2019
comment
Не могли бы вы также помочь мне со 2-м вопросом: почему ожидание работает в консоли google chrome, но не в javascript? - person Frank; 05.07.2019
comment
@Frank Это не только Chrome, он работает в инструментах разработки большинства браузеров. Это, вероятно, полезно прочитать: developers.google.com/web /обновления/2017/05/ - person Gerardo Furtado; 05.07.2019
comment
@Frank Эта ссылка еще лучше, она хорошо объясняет, почему вам не нужен async в консоли: medium.com/@tomsu/. Я добавил это к ответу. - person Gerardo Furtado; 05.07.2019

arrow_upward
0
arrow_downward

Пожалуйста, используйте

<script type="text/javascript">

Вместо

<script>
person Atif Tariq    schedule 05.11.2020