如何通过JavaScript中的多链函数返回对象

Question

Hello there code wizards,

I am trying to get json data from the specified url down below and use it in a React component outside of the getWeather() function. What are the efficient ways to pass along an object from the innermost to outside? my console reads undefined. I believe there is an issue with variable scoping... Thanks for an idea to solve it.

Below is the code

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, now allow return on you function, u need synchronous request. try node webkit for do you request.

Answer 2

You can use the callback method pattern to get the data and use it outside

 //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 }); } } } }; 

 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); 

Answer 3

Because of ajax (asynchronous) process js run continuously by line.
just make a callback function and pass it to calling function.

 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); }