Question

我有一个异步函数，我想从中返回一个值然后使用。

在updatedStyleSheet函数中，我想返回updated_css，以便可以在其他地方使用它。

async function updatedStyleSheet() {
  const res = await fetch("./prism.css");
  const orig_css = await res.text();
  let updated_css = orig_css;

  const regexp = /(?:var\(--)[a-zA-z\-]*(?:\))/g;
  let cssVars = orig_css.matchAll(regexp);
  cssVars = Array.from(cssVars).flat();

  for (const v of cssVars) {
     updated_css = updated_css.replace(v,   colors[v.slice(6, -1)]);
   };

// return updated_css ?
}

如果调用此函数，则会得到一个Promise对象。正确地这样，因为异步函数总是返回promise。

我可以在updated_css函数中返回updatedStyleSheet并在之后做类似的事情吗？

const newSheet = updatedStyleSheet().then(css => css)

然后在脚本中的任何地方使用newSheet变量？

最终目标

采用包含我的CSS文本内容的updated_css并将其用作href值，以便用户可以下载样式表。

修改

我试图添加一个事件处理程序，以便一旦用户保存所有选择的颜色值，就将它们保存在样式表中，但是似乎不起作用。我知道从整体上看，这仍然是一个问题。

我做了什么。

const updatedStyleSheet = async () => {
  const res = await fetch("./themes/prism.css");
  const orig_css = await res.text();
  let updated_css = orig_css;

  const regexp = /(?:var\(--)[a-zA-z\-]*(?:\))/g;
  let cssVars = orig_css.matchAll(regexp);
  cssVars = Array.from(cssVars).flat();
  console.log(cssVars)

  for await (const variable of cssVars) {
    const trimmedVar = variable.slice(6, -1)
    const styles = getComputedStyle(document.documentElement)
    const value = String(styles.getPropertyValue(`--${trimmedVar}`)).trim()

    updated_css = updated_css.replace(variable, value);
  }
  console.log(updated_css)

  return updated_css
}

const main = async () => {
  const downloadBtn = document.getElementById('download-btn')
  downloadBtn.addEventListener('click', () => {
    const updated_css = updatedStyleSheet()
    downloadBtn.setAttribute('href', 'data:application/octet-stream;charset=utf-8,' + encodeURIComponent(updated_css))
    downloadBtn.setAttribute('download', 'prism-theme.css')
  })
}

main()

我无法await updated_css，因为它属于click事件的回调，这是一个新功能。

然后我做了以下思考，因为它是顶级的，所以它可以工作。

const downloadBtn = document.getElementById('download-btn')
downloadBtn.addEventListener('click', async () => {
  const updated_css = await updatedStyleSheet()
  downloadBtn.setAttribute('href', 'data:application/octet-stream;charset=utf-8,' + encodeURIComponent(updated_css))
  downloadBtn.setAttribute('download', 'prism-theme.css')
})

这给了我以下错误TypeError: NetworkError when attempting to fetch resource.

Answer 1

我将使用.then（）函数EX来兑现承诺：

var bar = updatedStyleSheet()
bar.then(updated_css=>{
//logic goes here
});

Answer 2

是的。由于您已经在使用async/await，因此只需创建一个顶级async函数，例如main，然后在答应解决的问题后使用返回的updated_css内容：

async main() {
  const updated_css = await updatedStyleSheet()
  // use css as you please
}

// run program
main()

不要介意再进行一次函数调用。

Answer 3

如果您需要等待异步函数返回值（以便以后可以使用该值），请使用await关键字：

const newSheet = await updatedStyleSheet()

但是，请记住，等待将阻止执行直到函数返回。这可能不是您想要的行为。

如何从异步函数返回值

3 个答案: