如何解决清除缓存时非法调用 - 如何摆脱它?
我正在尝试使用 JavaScript 中的异步函数删除站点缓存。
这是我的代码:https://codesandbox.io/s/romantic-bardeen-k67v3?file=/src/App.js
import React from "react";
const emptyCache = async () => {
if ("caches" in window) {
const cacheKeys = await window.caches.keys();
await Promise.all(cacheKeys.map(window.caches.delete));
}
};
export default function App() {
return (
<div>
<p>
<a
href="foobar"
onClick={(e) => {
e.preventDefault();
emptyCache();
}}
>
ClearCache
</a>
</p>
</div>
);
}
经过一些研究后,我确信这可能与“失去上下文”有关,不幸的是,我真的不明白这到底发生在哪里以及为什么?
有人可以启发我吗?谢谢!
解决方法
当 delete()
方法传递给 .map()
时,上下文对象引用(到 window.cashes
)丢失。解决这个问题的最简单(好吧,最短)方法是使用包装函数:
await Promise.all(cacheKeys.map(key => window.caches.delete(key)));
方法——即作为某个对象的属性值的函数——与该对象没有任何自然的“亲和性”;它们只是函数。当对象作为方法使用时与对象的关系来自函数调用表达式本身。因此,window.caches.delete
作为一个简单的函数引用将有点漂浮在空间中,与 window.caches
无关。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。