Question

你好代码向导，

我正在尝试从下面的指定url获取json数据，并在getWeather（）函数之外的React组件中使用它。将物体从最里面传递到外面的有效方法是什么？我的控制台读取未定义。我相信变量范围存在问题...感谢您提出解决问题的想法。

以下是代码

function getWeather() {
    var url = 'http://api.openweathermap.org/data/2.5/weather?zip=3000,au';
    var apiKey= "005fa98ae858a29acf836ecdefac0411";
    var httpRequest;
    makeRequest();
    var response;


    function makeRequest() {
        httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = responseMethod;
        httpRequest.open('GET', url + '&appid=' + apiKey);
        httpRequest.send();
    }

    function responseMethod() {
        if(httpRequest.readyState === 4) {
            if(httpRequest.status === 200) {
                updateUISucess(httpRequest.responseText);

            } else {

            }
        }
    }

    function updateUISucess(responseText) {
        return response = JSON.parse(responseText);
        // I would like to get this JSON object out so that it logs on the console.
    }

    return response;
};



console.log(getWeather());

Answer 1

Chrome，现在允许返回您的功能，您需要同步请求。尝试使用node webkit进行请求。

Answer 2

您可以使用回调方法模式获取数据并在

之外使用它

＆＃13;

//Get weather function which accepts a callback function as a parameter
function getWeather(callback) {
  var url = 'http://api.openweathermap.org/data/2.5/weather?zip=3000,au';
  var apiKey = "005fa98ae858a29acf836ecdefac0411";
  var httpRequest;
  makeRequest();


  function makeRequest() {
    httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = responseMethod;
    httpRequest.open('GET', url + '&appid=' + apiKey);
    httpRequest.send();
  }

  function responseMethod() {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        try {
          //Parse response
          var data = JSON.parse(httpRequest.responseText);
          //Invoke callback function with first arg null and second with result
          callback(null, data);
        } catch (e) {
          //JSON parse failed
          //Invoke callback with first arg as error object
          callback(e)
        }
      } else {
      
       //Invoke callback with first arg as error object
        callback({
          success: false,
          status: httpRequest.status
        });
      }
    }
  }
};

＆＃13;

function Weather(props) {
  return <p>{JSON.stringify(props.result)}</p>;
}

//Callback which accepts err and result
function handleResult(err, result) {
  if (err) {
    //Check for errors and return early if needed
    console.log("Error!", JSON.stringify(err));
    return;
  }
  //Assign to react state here
  console.log(result);
  const element = <Weather result ={result}/ > ;
  ReactDOM.render(
    element
  );

}

//Invoke getWeather with callback function as parameter
getWeather(handleResult);

＆＃13;

Answer 3

由于ajax（异步）进程，js按行连续运行只需创建一个回调函数并将其传递给调用函数。

function getWeather(cb) {
    var url = 'http://api.openweathermap.org/data/2.5/weather?zip=3000,au';
    var apiKey= "005fa98ae858a29acf836ecdefac0411";
    var httpRequest;
    makeRequest();
    var response;


    function makeRequest() {
        httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = responseMethod;
        httpRequest.open('GET', url + '&appid=' + apiKey);
        httpRequest.send();
    }

    function responseMethod() {
        if(httpRequest.readyState === 4) {
            if(httpRequest.status === 200) {
                updateUISucess(httpRequest.responseText);

            } else {

            }
        }
    }

    function updateUISucess(responseText) {
       // return 
      response = JSON.parse(responseText);
        // I would like to get this JSON object out so that it logs on the console.
     cb(response);
    }

    return response;
};


getWeather(cb);

function cb(res){ 
   alert(res);
   console.log(res);
}

如何通过JavaScript

3 个答案: