在javascript中找不到非異步函數

Question

如果下面稱為 getData 的函數被定義為異步函數，則稍后在主體中調用時會找到它。 但是，如果在定義它時只刪除了 'async'，那么我們會收到錯誤“ReferenceError: getData is not defined”。 為什么會這樣？ 函數被定義為異步或不影響它何時在全局范圍內注冊？

在 head 標簽中定義一個函數：

<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>

然后稍后這在 body 標簽中被稱為

    const data = getData()

Answer 1

函數被定義為async或不影響它何時在全局范圍內注冊？

它沒有，但是從該函數中刪除async會導致await出現語法錯誤。 您應該在瀏覽器控制台和/或構建工具輸出中看到它。 您不能在非async函數中使用await 。 因此，由於它會導致語法錯誤，因此不會創建該函數，該腳本中也不會創建任何其他內容。

例子：

 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} }

如果你想讓它成為一個非async函數，你必須將await轉換為 promise 回調，就像這樣（另請參閱其他一些注釋）：

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}
    });
}

但請注意，它仍然異步完成大部分工作。 由於fetch的性質，它必須這樣做。

我會把它作為一個async函數。 它們在所有現代環境中都受支持。

Answer 2

因為await 需要一個async 函數，async 將函數轉換為promise 然后你可以使用await 看看這個以了解更多信息： https : //learnjsx.com/category/2/posts/es6-promise