使用来自 .then 方法的函数 承诺 超出其范围

Question

我有一个名为paintTiming.js的文件，它使用Paint Timing API来查找Web Performance参数，例如First Paint和First Concontext Paint。文件内容如下所示：

var FP, FCP, obj = [];
function parent() {
if ("PerformanceObserver" in window) {
let observerPromise = new Promise((resolve, reject) => {
// access the PerformanceObserver interface
let observer = new PerformanceObserver((list) => {
resolve(list);
});
observer.observe({
entryTypes: ["paint"]
});
}).then((list) => {
// Find out First Paint and First Contextual Paint
FP = list.getEntries()[0].startTime;
FCP = list.getEntries()[1].startTime;
// Store in array
obj[0] = FP;
obj[1] = FCP;
element = "The paint times are: <br> First Paint : " + FP + "ms, <br> First Contentful Paint : " + FCP + "ms";
// show values on web page
document.getElementsByTagName('p')[1].innerHTML = element;
}).then(() => {
// check if array is created, and is functioning
console.log(obj[0]);
}).then(() => {
// create function
function abc() {
return {
a: obj[0],
b: obj[1]
};
};
}).catch((error) => {
console.warn(error);
});
}
};

如您所见，在解析承诺时应该创建一个函数 abc()。

我的问题：如何在承诺之外使用此功能？

例如，请考虑以下示例(在 HTML 文件中使用)：

<script type="text/javascript" src="paintTiming.js"></script>
<script type="text/javascript">
// should return object containing FP and FCP values    
console.log(abc());
</script>

控制台显示未定义函数。如果 JS 代码是内联的，它仍然不起作用。

Answer 1

如果在.then中声明，您可能无法使用该函数。因为这个函数abc是传递给.then的回调函数私有的，那么 .then 只会与 ajax 一起执行。

或者，您可以在Promise外部定义此函数，并在.then回调中调用此函数。还需要使用thisbind上下文