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

在本文中，我们将在基于 Promise 的 API 中使用 Promisify 地理定位 API。

先决条件： JavaScript 承诺

方法：我们知道 navigator.geolocation.getCurrentPosition 是一个基于回调的 API，因此我们可以轻松地将其转换为基于 Promise 的 API。为了保证地理定位 API，我们将从浏览器中获取用户的当前位置。我们将根据获得当前位置来解决承诺或拒绝承诺。

例子：

HTML

 

    
 
    
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
        }
 
        h5 {
            color: black;
        }
 
        #geeks {
            font-size: 16px;
            font-weight: bold;
        }
 
        #gfg {
            color: green;
            font-size: 20px;
            font-weight: bold;
        }
    

 

    GeeksforGeeks
    
 
 
    Get My Location
    
 
 
    
        let s = `Promisifying the Geo Location API`;
        document.getElementById("geeks").innerHTML = `
<p>${s}</p>
`;
 
        // Logic start here
        let getLocationPromise = () => {
            return new Promise(function (resolve, reject) {
 
                // Promisifying the geolocation API
                navigator.geolocation.getCurrentPosition(
                    (position) => resolve(position),
                    (error) => reject(error)
                );
            });
        };
 
        function getLocation() {
            getLocationPromise()
                .then((res) => {
                     
                    // If promise get resolved
                    const { coords } = res;
                    document.getElementById("gfg").innerHTML = `
           
<p>
           <strong>You are Located at :</strong>
          </p>
 
  
          <h5>latitude : ${coords.latitude}</h5>
          <h5>longitude : ${coords.longitude}</h5>
          `;
                })
                .catch((error) => {
                    // If promise get rejected
                    document.getElementById("gfg")
                        .innerHTML = `
<p>${error}</p>
`;
                });
        }
    

 

输出：

承诺 geoLocation API

示例 2：我们甚至可以简化前面的代码，让它变得更好。我们知道navigator.geolocation.getCurrentPosition(callback, error)会自动调用回调函数并传递位置。

HTML

 

    
    
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
        }
 
        h5 {
            color: black;
        }
 
        #geeks {
            font-size: 16px;
            font-weight: bold;
        }
 
        #gfg {
            color: green;
            font-size: 20px;
            font-weight: bold;
        }
    

 

    GeeksforGeeks
    
 
 
    Get My Location
    
 
 
    
        let s = `Promisifying the Geo Location API`;
        document.getElementById("geeks")
        .innerHTML = `
<p>${s}</p>
`;
 
        let getLocationPromise = () => {
            return new Promise(function (resolve, reject) {
 
                // Automatically passes the position
                // to the callback
                navigator.geolocation
                    .getCurrentPosition(resolve, reject);
            });
        };
        function getLocation() {
            getLocationPromise()
                .then((res) => {
                    // If promise get resolved
                    const { coords } = res;
                    document.getElementById("gfg").innerHTML = `
             
<p>
                <strong>You are Located at :</strong>
            </p>
 
  
            <h5>latitude : ${coords.latitude}</h5>
            <h5>longitude : ${coords.longitude}</h5>
            `;
                })
                .catch((error) => {
                    // If promise get rejected
                    document.getElementById("gfg").innerHTML
                             = `
<p>${error}</p>
`;
                    // Console.error(error);
                });
        }
    

 

输出：

承诺 geoLocation API