运行在 Promise.then() 中定义的函数

Question

我有一个函数可以读取一个返回Promise的文件：

const fetchFile = async () => {
    let res = await fetch('myfile.json');
    let feat = await res.json();
    return fileContent;
}

然后，我仅在使用.then() 解决承诺时（即加载实际文件内容时）运行一些代码：

var external_variable = 2
fetchFile().then(fileContent => { 
    // do many things with fileContent and external_variable
    const myFunction = (fileContent[0].properties) => {
        // do stuff with some properties of the json object contained in the file
        // which has been loaded and external_variable
    }
    // do other things
});

但是当我尝试使用我的 HTML 页面上的按钮调用 myFunction 时：

<button id ="myButton1" onclick="myFunction()">The do stuff button</button>

我遇到了这个错误：Uncaught TypeError: myFunction is not a function

因此我的问题;单击按钮时如何调用此函数？

这些没有多大帮助：
promise.then functions only works if defined inside
Calling a function that's defined inside a function
How does Promise run when .then method is not called?
Javascript call nested function

Answer 1

内联处理程序may only reference global variables（无论如何都不应该在现代代码中使用，它们有太多问题无法使用）。

由于您只在 fetchFile 解析后定义 myFunction，因此在此时为带有 addEventListener 的按钮添加一个侦听器，并删除内联处理程序：

var external_variable = 2
fetchFile().then(fileContent => { 
    // do many things with fileContent and external_variable
    const myFunction = () => {
        // do stuff with some properties of the json object contained in the file
        // which has been loaded and external_variable
    };
    document.querySelector('#myButton1').addEventListener('click', myFunction);
    // do other things
});