獲取用戶IP並將其存儲為在Geolocation API中使用的變量

Question

我正在嘗試讓moocher.io地理位置（ https://market.mashape.com/moocher-io/ip-geolocation ）在我的Web應用程序上正常工作。 此API需要ip輸入才能返回位置，等等。我只是想發送一個get請求來獲取用戶IP，因為我需要它自動找到他們的位置，而不必輸入用戶ip。

$.get("http://ipinfo.io", function(response) {
alert(response.ip);
}, "jsonp");

那將返回一個IP，並提醒我該IP是什么。 我需要做的是獲取該ip並將其作為變量插入到我的地理位置功能中。 這是現在的完整功能，

$(document).ready(function () {
        var url = 'https://moocher-io-ip-geolocation-v1.p.mashape.com/' + ip;
        var ip = $.get("http://ipinfo.io", function(response) {
        alert(response.ip);
        }, "jsonp");

        $.ajax({
            url: url
            , type: 'GET'
            , dataType: 'json'
            , success: function (data) {
                console.log('SUCCESS');
                console.log(data);
                console.log(data.country);
                console.log(data.city);
                console.log(data.state);

            }
            , error: function (data) {
                console.log('ERROR');
                console.log(data);
            }
            , beforeSend: setHeaders
        });
    });
 function setHeaders(xhr) {
            xhr.setRequestHeader('X-Mashape-Key', 
 'OURjCxSqLNmshIvDitfBhE88vFV8p1WrqCRjsnr8HkCb33A83c');
            xhr.setRequestHeader('Accept', 'application/json');
        }'

Answer 1

現在，在您收到第一個請求返回的IP地址之前，正在進行第二個異步請求。 您將要等到moocher.io發出請求，直到收到ipinfo.io 。

幸運的是，這是一個快速修復。 您可以將第二個異步請求包裝在一個函數中，然后在第一個異步請求的回調中調用該函數：

$.get("https://ipinfo.io", function(response) {
   alert("Initial IP address request: " + response.ip);
   mooch(response.ip);
}, "jsonp");

function mooch(ip) {
    var url = 'https://moocher-io-ip-geolocation-v1.p.mashape.com/' + ip;

  $.ajax({
    url: url
    , type: 'GET'
    , dataType: 'json'
    , success: function (data) {
      console.log('SUCCESS');
      console.log(data);
      console.log(data.ip.country);
      console.log(data.ip.city);
      console.log(data.ip.region);
    }
    , error: function (data) {
      console.log('ERROR');
      console.log(data);
    }
    , beforeSend: setHeaders
  });
}

function setHeaders(xhr) {
  xhr.setRequestHeader('X-Mashape-Key', 
                       'OURjCxSqLNmshIvDitfBhE88vFV8p1WrqCRjsnr8HkCb33A83c');
  xhr.setRequestHeader('Accept', 'application/json');
}

請注意，從moocher.io返回的結果數據似乎與您的初稿略有不同（它嵌套在“ ip”鍵下，而“狀態”列為“區域”。

https://jsfiddle.net/gco65kqy/2

祝好運！