浏览器中读取本地YAML文件赋值给jQuery变量失败问题

这个问题的核心是异步操作的执行顺序——$.get是异步HTTP请求，你的read_config函数在请求还没完成、YAML还没解析的时候就已经执行结束了，所以它没有返回任何值，自然ymlconfig就是undefined。而done回调里的return _yaml只是在回调函数内部返回，不会传递到外面的read_config返回值里。

下面提供两种可行的解决方法：

方法一：使用回调函数处理异步结果 #

把read_config改成接受一个回调函数作为参数，当YAML解析完成后，调用这个回调把数据传递出去：

$( document ).ready(function() {
  read_config('config.yaml', function(ymlconfig) {
    console.log(ymlconfig["compute"][0]); // 现在可以正常工作了
  });

  function read_config(cfgfile, callback) {
    $.get({url: cfgfile, dataType: "text"}).done(function (data) {
      var _yaml = jsyaml.load(data);
      console.log(_yaml["compute"][0]) // WORKING OK
      callback(_yaml); // 将解析后的数据传给回调函数
    });
  };
});

方法二：使用Promise + Async/Await（更现代的写法） #

jQuery的$.get返回的Deferred对象兼容Promise规范，所以我们可以用async/await语法让异步代码看起来更像同步代码，提升可读性：

$( document ).ready(async function() { // 外层回调需标记为async
  var ymlconfig = await read_config('config.yaml');
  console.log(ymlconfig["compute"][0]); // 现在可以正常工作了

  function read_config(cfgfile) {
    // 返回Promise对象
    return $.get({url: cfgfile, dataType: "text"}).then(function (data) {
      var _yaml = jsyaml.load(data);
      console.log(_yaml["compute"][0]) // WORKING OK
      return _yaml;
    });
  };
});

注意：使用async/await时，包含await语句的函数必须被标记为async，这里就是$(document).ready的回调函数需要添加async关键字。

内容的提问来源于stack exchange，提问作者nicklas