Greasy Fork

Use GM.xmlHttpRequest response outside of the request

Hi,

I just want to fetch currency exchange rates from an api returning JSON data. It works, but I can't use the value outside of the function.

// ==UserScript==
// @name         fetch currency exchange rate
// @namespace    graphen
// @version      1.0.0
// @author       Graphen
// @match        *example.com*
// @grant        GM.xmlHttpRequest
// @noframes
// ==/UserScript==

/* jshint esversion: 6 */
(function (doc) {
    'use strict';

    var ER, res;
    function fetchExchangeRate(erUrl) {
        GM.xmlHttpRequest ({
            method :  'GET',
            url:      erUrl,
            headers : { 'Content-type' : 'application/json' },
            onload :  function(xhr) {
                res = JSON.parse(xhr.responseText);
                //console.log("Got exchangerate USD --> EUR from server api.exchangeratesapi.io :");
                //console.log(res.rates.EUR); // THIS WORKS
                ER = res.rates.EUR;           // THIS DOESNT WORK (undefined outside)
                return ER;                    // THIS DOESNT WORK (undefined outside)
                // return res.rates.EUR;      // THIS DOESNT WORK (undefined outside)
            },
            onerror : function(xhr) {
                //console.log("Error fetching JSON from xhr.");
                return false;
            }
        });
    }
    fetchExchangeRate("https://api.exchangeratesapi.io/latest?base=USD&symbols=EUR");
    //console.log(fetchExchangeRate("https://api.exchangeratesapi.io/latest?base=USD&symbols=EUR"));
    console.log(ER);

})(document);

No matter if I make a copy to a variable or make a direct return - it always says "undefined" outside of the function.

You can't use it outside of the function. The data is fetched asynchronously - GM.xmlHttpRequest basically registers a one-time event listener for "onload" event, immediately exits, then the rest of your code runs, then the data is fetched and the callback is invoked - which happens at some point in the future.

You can wrap GM.xmlHttpRequest into a Promise and switch to async/await syntax, look for tutorials and existing libraries here on GF.

Thanks for the good explanation, which now requires a not-so-pleasant solution from me :smile:

Simply put all the processing of data within onload function

@trespassersW Already thought about that but it's kind of ugly. To make sure the code runs I may have to duplicate all the stuff to do into onerror? I already started to learn about that asynchronous promise-resolve stuff, but it's not easy as beginner. First I wanted to get comfortable with objects, anonymous functions, callbacks, arrow style notation, ...

duplicate all the stuff to do into onerror? You may write a separate function for "duplicated stuff" and use in both event handlers

Ah right, I can get stuff "from outside in", apparently just not from inside out of the xmlHttpRequest.