JS配置同步请求

场景

基于vue开发的单页面系统，index.html页面加载的时候会按顺序加载多个js脚本文件。第一个加载执行的js文件是不含异步调用的配置文件，后续执行的其他脚本根据该配置文件里面的信息来执行。目前想把配置文件里面的部分配置存到数据库，然后通过接口调用的方式获取配置并可以界面化修改配置（从而避免直接打开前端js文件来维护配置）。

因为存数据库的配置涉及到整个系统的运行，必须要先获取到配置信息后才能执行后续js脚本逻辑。因此必须要将接口获取配置这一异步请求操作实现同步请求的效果。

解决方案

• 回调函数

通过将后续所有要执行的脚本全部放到请求回调函数里面来实现。现实情况是：系统初始化加载会加载好多个独立的js文件，而且除第一个配置脚本外，后续的其他脚本文件都是经过编译出来的文件，无法实现回调函数的方式。

• async/await

在平常的开发中，我们会使用async/await语法糖来实现同步执行的效果，避免产生回调地狱。实现函数同步调用的前提是执行函数得处在 async包裹的函数内部，适用于在同一个js文件且同一个函数体里面。但是我们目前的情况是：系统会加载多个js文件，无法把所有的脚本封装进一个统一的函数里面来调用。可以通过以下的一个简单示例来理解：

async function testAsync() {
  const aa = await Promise.resolve('aa')
  console.log(aa)
  console.log('bb')
}
console.log('cc')
testAsync() // 执行结果：cc aa bb

• ajax设置为同步请求

通过配置ajax请求为同步请求来阻塞当前代码的执行，直到接收到服务器端的回应后才继续执行后续代码。该方式由于会阻塞代码执行，因此可能会导致页面空白，影响用户体验。

getConfig()
console.log('继续执行')
function getConfig() {
  let xhr = null
  // 兼容写法
  if (window.XMLHttpRequest) {
    // 标准浏览器
    xhr = new XMLHttpRequest()
  } else {
    // IE6浏览器
    // eslint-disable-next-line no-undef
    xhr = new ActiveXObject('Microsoft.XMLHTTP')
  }
  // 将 xhr.open 的第三个参数改成 false,即由异步改成同步请求
  xhr.open('GET', 'http://127.0.0.1:9990/index', false)
  // 4、指定回调函数，处理得到的数据
  xhr.onreadystatechange = function() {
    // 通过判断 xhr 的 readyState，确定此次请求是否完成
    if (this.readyState === 4) {
      console.log('请求成功')
    }
  }
  // 3、send() 方法发送一次请求
  xhr.send(null)
  // Ajax 后面的代码
  console.log('After Ajax')
}
// 最终执行结果： 请求成功 After Ajax 继续执行