如何避免不必要的Resolve调用？阻止父状态Resolve在子状态解析时触发

1. 如何避免不必要的Resolve调用？ #

要减少无意义的resolve执行，你可以从这几个实用方向入手：

• 给resolve加前置条件判断
  在resolve函数里先检查是否已有可用数据（比如本地缓存），如果满足条件就直接返回，跳过耗时操作（比如API请求、复杂计算）。示例代码：

  .state('user', {
    resolve: {
      userProfile: function(UserCache, $stateParams) {
        // 先查缓存，有数据直接用，不用发请求
        if (UserCache.exists($stateParams.userId)) {
          return UserCache.get($stateParams.userId);
        }
        // 缓存空了才发起API请求
        return UserApi.fetchProfile($stateParams.userId);
      }
    }
  })
  

• 精准控制状态重载的范围
  当需要重新加载状态时，别直接用无参数的$state.reload()，而是指定只重载目标子状态，这样父状态的resolve就不会重复执行。示例：

  // 只重载A.B状态，父状态A的resolve完全不会触发
  $state.go('A.B', {}, { reload: 'A.B' });
  

• 谨慎使用状态继承配置
  如果某个状态完全不需要继承父状态的任何resolve，可以设置inherit: false，但要注意这个配置会同时禁用URL、数据等其他继承属性，得根据你的实际场景判断是否适用。

2. 子状态A.B解析时阻止父状态的Resolve（A1、A2、A3）调用 #

UI Router默认会先跑完父状态的所有resolve，再执行子状态的。要阻止父状态resolve执行，有两种常用方案：

方案一：用resolvePolicy配置（推荐） #

UI Router 1.x及以上版本提供了resolvePolicy选项，能让子状态完全不继承父状态的resolve，配置简单又清晰：

.state('A', {
  resolve: {
    A1: function() {
      console.log('父状态A的A1 resolve执行');
      return Promise.resolve('A1数据');
    },
    A2: function() {
      console.log('父状态A的A2 resolve执行');
      return Promise.resolve('A2数据');
    },
    A3: function() {
      console.log('父状态A的A3 resolve执行');
      return Promise.resolve('A3数据');
    }
  }
})
.state('A.B', {
  resolvePolicy: { inherit: false }, // 关键配置，直接阻止继承父状态resolve
  template: '<div>子状态A.B内容</div>'
})

方案二：覆盖父状态的resolve项 #

如果只想跳过部分父resolve，而非全部，可以在子状态里重新定义对应的resolve项，直接返回已resolved的结果（比如空Promise或固定值），这样父状态的对应resolve函数就不会被执行：

.state('A.B', {
  resolve: {
    // 覆盖父状态的A1、A2、A3，直接返回resolved值
    A1: () => Promise.resolve(),
    A2: () => Promise.resolve(),
    A3: () => Promise.resolve()
  },
  template: '<div>子状态A.B内容</div>'
})

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