如何 Promisify 地理定位 API 以使用 JavaScript 获取当前位置？

在前端开发中，我们常常需要使用地理定位 API 来获取用户的位置信息，以此来调整页面的展示内容或功能。然而，地理定位 API 通常是异步返回结果的，这就需要我们使用 Promise 来进行封装，以便后续代码能够更好地处理返回结果。

本文将介绍如何 Promisify 地理定位 API，以使用 JavaScript 获取当前位置。

Promisify 地理定位 API

首先，我们需要了解地理定位 API 的原始用法。一般情况下，我们可以通过以下代码来获取用户的当前位置：

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log("Latitude is :", position.coords.latitude);
    console.log("Longitude is :", position.coords.longitude);
  });
} else {
  console.log("geolocation is not available");
}

其中，navigator.geolocation 是地理定位 API 的主要对象，getCurrentPosition() 是其中的一个方法，可以用来获取当前位置的经纬度坐标。

这里需要注意的是，getCurrentPosition() 是异步执行的，也就是说获取到位置信息后，需要通过回调函数来处理返回结果。但是，异步回调的处理方式不太易用，并且容易产生回调地狱等问题。因此，我们可以使用 Promise 来将其封装，以便后续代码能够更好的处理返回结果。

下面是 Promisify 地理定位 API 的示例代码：

function getCurrentPosition() {
  return new Promise((resolve, reject) => {
    if (!("geolocation" in navigator)) {
      reject("Geolocation is not supported");
    }
    navigator.geolocation.getCurrentPosition(resolve, reject);
  });
}

getCurrentPosition().then((position) => {
  console.log("Latitude is :", position.coords.latitude);
  console.log("Longitude is :", position.coords.longitude);
}).catch((error) =>{
  console.log(error);
});

在这个示例中，我们创建了一个名为 getCurrentPosition() 的函数，该函数返回一个 Promise 对象。在函数内部，我们首先进行了一些必要的判断，确认该浏览器是否支持地理定位 API。然后，我们调用 navigator.geolocation.getCurrentPosition() 方法，并将 resolve 和 reject 作为回调函数传入。最后，我们将这个 Promise 对象返回。

在代码的下一部分，我们可以通过 getCurrentPosition() 方法来获取当前位置。如果代码成功获取了位置信息，就会调用 then() 方法内的函数，否则会调用 catch() 方法内的函数，并将错误信息传递给它们。

结论

通过 Promisify 地理定位 API，我们可以更加容易地在代码中处理异步请求，并封装成易用的 Promise 对象。这大大简化了代码编写和阅读的复杂度，提高了代码的可读性和可维护性。