Question

我正在编写一个React应用程序，并试图编写一个返回用户当前位置的函数，以便可以在我的应用程序中使用它。但是，我对诺言不陌生，尽管我尽了最大努力，但我的代码仍无法正常工作。代码如下：

.antMatchers("/uploads/**")
.hasRole("IMAGE_USER_ROLE")
.anyRequest()
.authenticated()

我收到错误：“ getCurrentLocation（）”行上出现“未处理的拒绝（TypeError）：无法读取未定义的属性'then'”。我相信这意味着.then（）试图在getCurrentLocation（）解决之前执行。

currentCoordinates正确填充，但是引发了错误之后。

由于我是新手，所以我确定自己做的事情很简单！

Answer 1

您不能像这样使用Promsise.resolve()，因为您要向回调而不是原始调用方返回一个值。您需要将呼叫包装在一个Promise中并返回该Promise。得到结果后，调用resolve。像这样：

const getCurrentLocation = () => { 
    return new Promise((resolve, reject) =>{
        if (!navigator.geolocation) reject(new Error('Get User Location error'))
        else {
            navigator.geolocation.getCurrentPosition((position) => {
                let currentCoordinates = {
                  lat: position.coords.latitude,
                  lng: position.coords.longitude
                }
                resolve(currentCoordinates)
              })
        }

    })
  }

Answer 2

navigator.geolocation.getCurrentPosition是需要回调的异步方法，因此它将返回未定义的值，并且您回调中的return方法实际上什么也没做。

相反，您需要将整个函数包装在Promise中，并从其内部进行解析/拒绝。

const getCurrentLocation = () => {
  return new Promise((resolve, reject) => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        let currentCoordinates = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        }
        resolve(currentCoordinates)
      })
    } else {
      reject(new Error('Get User Location error'))
    }
  })
}
getCurrentLocation()
  .then((userCoords) => { console.log(userCoords) })
  .catch((error) => { console.log(error) })

.then（）尝试在承诺未解决之前运行

2 个答案: