根据 JavaScript 中的异步函数暂停整个脚本执行的正确方法是什么？

Question

我的很多脚本取决于首先使用 .JSON 文件读取的信息fetch()，.json()因此它是异步的。我需要延迟执行我的脚本的其余部分，直到这些函数完成，而不会将我的其余代码粘贴在一个巨大的.then()或功能块或其他东西中。我已经做了一些搜索，但我真的找不到我要找的东西。let config;fetch(chrome.runtime.getURL("../config.json"))  .then(response => response.json())  .then(json => config = json);console.log(config);// REST OF SCRIPT它应该记录配置 JSON 对象或承诺，但显然，它只返回未定义。任何帮助将不胜感激！

Answer 1

您只有一个线程可以使用，因此您需要执行配置的异步获取，然后继续执行程序的其余部分这一事实是无法回避的。大多数 javascript 是事件驱动的，所以这通常不是一个大问题。您可以编写代码的主要入口是一个main()函数的样式，然后您可以在获取它后使用配置调用它：

fetch(chrome.runtime.getURL("../config.json"))

  .then(response => response.json())

  .then(main);

function main(config){

  // do stuff

}

无论如何，任何相当大的代码库都将被重构为更小的函数，因此理想情况下，您的main函数一开始就不应该那么大。

Answer 2

config在请求返回之前您正在被读取。您可以添加另一个then子句：

let config;

fetch(chrome.runtime.getURL("../config.json"))

  .then(response => response.json())

  .then(json => config = json)

  .then(() => {

     console.log(config);

   });

Answer 3

你可以使用这个：

fetch(chrome.runtime.getURL("../config.json"))

    .then(response => response.json())

    .then(config => console.log(config));

或者：

const response = await fetch(chrome.runtime.getURL("../config.json"));

const config = await response.json();

config => console.log(config)