Si la función a continuación, llamada getData, se define como una función asíncrona, se encuentra más tarde cuando se la llama en el cuerpo. Sin embargo, si solo se elimina 'async' al definirlo, obtenemos el error "ReferenceError: getData no está definido". ¿Por qué está pasando esto? ¿Cómo afecta una función que se define como asíncrona o no cuando se registra en el ámbito global?
Defina una función en la etiqueta principal como:
<script> async function getData() { const x =[] const y =[] const response=await fetch('data.csv'); console.log('response revieved'); const data = await response.text(); console.log(data); split=data.split('\n').slice(1); split.forEach(row => { columns=row.split(',') x.push(columns[0]) y.push(columns[1]) }); return{x,y} } </script>Luego, más tarde, esto se llama en la etiqueta del cuerpo como
const data = getData()¿Cómo afecta una función que se define como
asynco no cuando se registra en el ámbito global?
No es así, pero eliminar async de esa función provoca un error de sintaxis en await . Debería verlo en la consola de su navegador y/o en la salida de las herramientas de compilación. No puede await dentro de una función no async . Entonces, dado que causa un error de sintaxis, la función no se crea, ni nada más en ese script.
Ejemplo:
function getData() { const x =[] const y =[] const response=await fetch('data.csv'); console.log('response revieved'); const data = await response.text(); console.log(data); split=data.split('\n').slice(1); split.forEach(row => { columns=row.split(',') x.push(columns[0]) y.push(columns[1]) }); return{x,y} } Si desea que sea una función no async , debe convertir la await para prometer devoluciones de llamada, como esta (vea también algunas otras notas):
function getData() { return fetch("data.csv") .then(response => { // *** Side note: This check was missing // More in my blog post: http://blog.niftysnippets.org/2018/06/common-fetch-errors.html if (!response.ok) { throw new Error(`HTTP error ${response.status}`); } return response.text(); }) .then(data => { const x = []; const y = []; // *** Side note: Was missing `const` (or `let`) const split = data.split('\n').slice(1); // *** Side note: This could be a `for-of` loop, which might be clearer split.forEach(row => { // *** Side note: Was missing `const` (or `let`) const columns = row.split(','); x.push(columns[0]); y.push(columns[1]); }); return {x, y} }); } Pero tenga en cuenta que todavía hace la mayor parte de su trabajo de forma asíncrona. Tiene que hacerlo, debido a la naturaleza de fetch .
Lo dejaría como una función async . Se admiten en todos los entornos modernos.
Debido a que await necesita una función asíncrona, async transforma la función en una promesa y luego podría usar await, eche un vistazo a esto para obtener más información: https://learnjsx.com/category/2/posts/es6-promise