如何在NodeJS中运行同步函数中的异步函数？

Question

我有一个vue项目，它使用CDN来获得用于运行的库。现在，我想在脚本标签上添加一个完整性属性，以验证它从CDN中提取的脚本。我希望代码自动生成脚本的哈希，并在我构建项目时插入到dist。

我想要一个像这样的同步函数：

function integrityWapper ({ css, js }) {
  const hash = require('crypto-js').SHA384
  const icss = []; const ijs = []
  for (const i in css) {
    icss.push([css[i], hash(GettingScriptContentFromWeb(css[i]))])
  }
  for (const i in js) {
    ijs.push([js[i], hash(GettingScriptContentFromWeb(js[i]))])
  }
  return { icss, ijs }
}

显然，这个函数不能是异步的，因为我试图为vue.config.js生成配置，所以GettingScriptContentFromWeb函数也必须是同步的。

是否有方法在同步函数中转换调用异步函数(我指的是axios.get)并等待它完成？

更新:不，我不能仅仅重写上游，因为我需要在vue.config.js中导出结果，这是我目前使用的一些代码：

** vue.config.js **

module.exports = defineConfig({
  integrity: true,
  pages: {
    index: {
      entry: 'src/main.ts',
      template: 'public/index.html',
      filename: 'index.html',
      CDN: cdnConfig.use ? cdnConfig.list : null
    }
  }
})

//cdnConfig.list is like this:
list: {
  css: [
    [
      'https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.13/index.css',
      'sha384-WdBufJjVUMBy2e6mTgtUbbYZvZg7vdYW3ijXdfg4jglZAehE17bPFaxNMhFXuH1Z'
    ]
  ],
  js: [
    [
      'https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.prod.min.js',
      'sha384-MB7auY3xTNj+3Hk53DrKFyXN7Djh50mLDesxCDPr4XENv8gK06a3RqhmkXBfcPFh'
    ]
  ]
}

或者有人能告诉我，我怎么才能重写vue和webpack读这些配置的部分呢？我是应该在另一个文件中编写这个脚本，然后在npm run build中的npm run build中的之前运行它，还是尝试使用像de异步或sync-kit这样的包？

Answer 1

是否有方法在同步函数中转换调用异步函数(我指的是axios.get)并等待它完成？

不，没有。axios.get()是异步的，您无法同步获得它的结果。

您必须重写代码才能使用异步设计。可能，GettingScriptContentFromWeb()需要返回一个承诺，integrityWrapper()需要使用这个承诺，也需要返回一个承诺。然后，integrityWrapper()的调用方需要使用.then()或await，以保证integrityWrapper()将返回以获得已解析的值。

例如，如果您更改了GettingScriptContentFromWeb()以返回解析为其值的承诺，那么您可以这样做：

async function integrityWapper ({ css, js }) {
  const hash = require('crypto-js').SHA384
  const icss = []; const ijs = []
  for (const i in css) {
    icss.push([css[i], hash(await GettingScriptContentFromWeb(css[i]))])
  }
  for (const i in js) {
    ijs.push([js[i], hash(await GettingScriptContentFromWeb(js[i]))])
  }
  return { icss, ijs }
}

integrityWrapper(...).then(result => {
    // use the asynchronously retrieved result here
}).catch(err => {
    // got some error here
});

如果css或js是数组，那么您应该使用for/of来迭代数组，而不是for/in。如果它们是对象，则可以使用for/in迭代它们的可枚举属性。

Answer 2

在处理http时，结果总是异步的。从上下文来看，我假设您希望在构建项目时执行此脚本，类似于yarn dostuff。

这可以通过将异步函数封装在自动执行的函数中来实现。

index.js

async function integrityWapper ({ css, js }) {
  const hash = require('crypto-js').SHA384
  const icss = []; const ijs = []
  for (const i in css) {
    icss.push([css[i], hash(await GettingScriptContentFromWeb(css[i]))])
  }
  for (const i in js) {
    ijs.push([js[i], hash(await GettingScriptContentFromWeb(js[i]))])
  }
  return { icss, ijs }
}

const executor = (async ()=>{
  await integrityWapper({
    css: process.env.CSS,
    js: process.env.JS
  });
})();

export default executor;

然后在package.json中添加一个脚本

  "scripts": {
    "dostuff": "node index.js",
    "custom-build": "yarn dostuff && yarn build"
  },

上面线条上的某物

希望我说得通