AngularJS中查询后执行代码问题：赋值因异步未生效

嘿，这绝对是异步操作里最容易踩的坑之一！我来帮你把问题捋明白，再给你几个靠谱的解决方案。

问题根源 #

你写的Book.get().$promise是一个异步HTTP请求——浏览器会在后台悄悄发送请求，同时继续执行后续代码。当你在promise的回调外面执行vm.top = vm.list.name时，请求还没完成，vm.list根本还没被赋值，自然会得到undefined。

核心解决方案 #

所有依赖异步请求结果的代码，必须放在then回调函数里面，因为只有这里能保证请求已经完成、数据已经拿到手：

Book.get({ id: $stateParams.id, min: 0, max: 3 }).$promise
  .then(function(data){ 
    vm.list = data;
    // 这里可以安全访问vm.list的属性了
    vm.top = vm.list.name;
  })
  .finally(function () { 
    // finally里放不管请求成功失败都要执行的逻辑，比如隐藏loading状态
    // 但这里拿不到请求返回的数据，所以不能在这里做赋值操作
  });

模板层面的优化方案 #

如果是在页面模板中展示数据，还可以用AngularJS的内置语法避免undefined报错：

• 用ng-if先判断vm.list是否存在，再渲染内容：

<div ng-if="vm.list">
  {{ vm.list.name }}
</div>

• 如果你用的AngularJS版本支持ES2020+语法，还可以用可选链操作符简化写法：

<div>{{ vm.list?.name }}</div>

进阶写法（Async/Await） #

如果你的项目允许使用ES7+语法，也可以用async/await让代码看起来更像同步逻辑，可读性更强：

async function loadBookData() {
  try {
    const data = await Book.get({ id: $stateParams.id, min: 0, max: 3 }).$promise;
    vm.list = data;
    vm.top = vm.list.name;
  } catch (error) {
    // 这里处理请求失败的情况，比如弹出错误提示
    console.error('加载书籍数据失败：', error);
  } finally {
    // 这里放收尾逻辑，比如关闭加载动画
  }
}

// 调用这个异步函数
loadBookData();

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