Redux Saga中调用navigator.permissions.query报非法调用错误的解决方法

你遇到的问题核心是navigator.permissions.query方法的上下文丢失——该方法执行时需要将this绑定到navigator.permissions对象，而Redux Saga的call方法直接调用函数时，会丢失原本的上下文，导致非法调用。除了在生成器外部调用，还有两种直接的解决方案：

方案1：显式绑定方法的上下文 #

使用bind将query方法绑定到navigator.permissions对象，确保执行时this指向正确：

function* getUserLocation(){
  const result = yield call(
    navigator.permissions.query.bind(navigator.permissions),
    { name: "geolocation" }
  );
  switch (result.state) {
    // 处理不同权限状态的逻辑
  }
}

方案2：用箭头函数包裹调用 #

通过箭头函数在原上下文环境中调用query，箭头函数会自动继承外部的上下文，避免this丢失：

function* getUserLocation(){
  const result = yield call(() => 
    navigator.permissions.query({ name: "geolocation" })
  );
  switch (result.state) {
    // 处理不同权限状态的逻辑
  }
}

两种方案都能解决问题，你可以根据代码风格偏好选择：绑定方式更直接体现上下文修正，箭头函数则更简洁。

内容的提问来源于stack exchange，提问作者Julián McClinton