提问人：Oscar R 提问时间：11/15/2022 更新时间：11/15/2022 访问量：292
当使用 async/await 声明变量时，如何使变量在不同的 javascript 文件中可用？
How do I make variables available across different javascript files when the variables are declared using async/await?
问：
<html>
<!-- ... (other page content) ... -->
<script src="common.js"></script>
<script src="homepage.js"></script>
</html>
在我网站的每个页面上，我都有一个通用的.js文件，用于每个页面上始终需要的东西。然后我有一个专门用于该页面的 js 文件。
我的问题是，在common.js文件中声明的变量也需要在第二个js文件中访问，但是我遇到了一些问题，因为脚本没有等待声明数据变量，并且不允许在脚本的顶层使用await。
// common.js
let data;
async function get_data() {
data = await fetch('/get-data').then(res => res.json())
console.log(data) // works!!!
}
get_data();
console.log(data) // does not work!!!
// homepage.js
console.log(data) // does not work!!!
所以我要问的是，我怎样才能让两个不起作用的电话起作用！console.log(data)
答：
1赞
CertainPerformance
11/15/2022
#1
创建一个解析为 的全局 Promise，然后在需要使用该 Promise 时调用它。data.then
// common.js
window.dataProm = fetch('/get-data').then(res => res.json());
dataProm
.then((data) => {
console.log(data);
})
// .catch(handleErrors);
// homepage.js
dataProm
.then((data) => {
console.log(data);
})
// .catch(handleErrors);
1赞
Phil
11/15/2022
#2
将生成的 promise 分配给全局范围的变量。
// common.js
async function get_data() {
const res = await fetch('/get-data');
if (!res.ok) {
throw res;
}
return res.json(); // return the data
}
// Assign to a variable
const dataPromise = get_data();
dataPromise.then(console.log);
// homepage.js
dataPromise.then(console.log); // why does everyone log everything ¯\_(ツ)_/¯
0赞
Joel
11/15/2022
#3
三 （3） 个不依赖 .window
这里有一些可行的方法。一个是变量，另一个是通过和/或将函数/类的实例传递给相应的文件。
但总的来说，我认为你要找的是其他语言的关键词。嗯，它也存在于 JavaScript 中。globalclassesstatic
静态关键字
这种方法的优点是，您不必创建类的新实例并将其作为引用传递（请参阅最后一个示例）。
从本质上讲，无论您希望在任何位置获取共享资源值。只需导入文件并使用该方法（在此示例中）。commongetStaticProperty
通用.js
export default class Common {
static staticProperty = 0;
static getStaticProperty() {
return this.staticProperty;
}
static setStaticProperty(val) {
this.staticProperty = val;
}
}
.js
import Common from './common';
export default function a() {
Common.setStaticProperty(321); // here we set the value
}
b.js
import Common from './common';
export default function b() {
console.log(Common.getStaticProperty()); // prints 321
}
索引.js
import a from './a';
import b from './b';
a();
b();
全局变量
通用.js
let globalValue = 0;
function setSharedValue(val) {
globalValue = val;
}
function getSharedValue() {
console.log('global value', globalValue);
}
export { setSharedValue, getSharedValue };
.js
import { getSharedValue, setSharedValue } from './common';
function runA() {
setSharedValue(3); // here we set the value to '3'
getSharedValue(); // prints 3
}
export default runA;
b.js
import { getSharedValue } from './common';
function runB() {
console.log('from B');
getSharedValue(); // also prints 3
}
export default runB;
索引.js
import a from './a';
import b from './b';
a(); // 3
b(); // from b, 3
类（并通过引用传递）
通用.js
export default class Common {
constructor() { // redundant
this.sharedValue = 0;
}
getSharedValue() {
return this.sharedValue;
}
setSharedValue(value) {
this.sharedValue = value;
}
}
.js
export default function A(commonInstance) {
const sharedValue = commonInstance.getSharedValue();
console.log('shared value', sharedValue);
}
索引.js
import Common from './common';
import A from './a';
const shared = new Common();
shared.setSharedValue(55); // set the common value to 55.
A(shared); // prints 55
总之，您可以将这些方法应用于变量、函数和类，以便在不同的 javascript 文件中获取共享变量。
评论
window.data = await fetch('/get-data').then(res => res.json())