Google Sheets driven client-side car stats app: Part 5

I don't know if this warrants its own post, but I'd like to get the code that fetches the data out of my vue.js configuration.

This code:

  created: function () {
    fetch(url)
    .then(
      function(response) {
          response.json().then(function(data) {
            app.data = data;
            app.dataAvailable = true;
          });
      }
    ).catch((error) => {
      console.error('Error:', error);
    });
  },

Instead, I'll write a "service", or at least something that looks like it. So I'll put this in a separate "services.js" file:

let url = 'https://spreadsheets.google.com/feeds/cells/16hJ_67ox89L3DuVuc8KWAGMYFwb58rVP2fjCkc2AoGE/1/public/full?alt=json';

let edriveDataService = (function () {
    let fetchData = function (callback) {
        fetch(url)
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                callback(data);
            })
            .catch((error) => {
                console.error('Error:', error);
            });;
    };

    return {
        fetchData: fetchData
    };
}());

Then I can use it, like so:

  created: function () {
    edriveDataService.fetchData(function (data) {
      app.data = data;
      app.dataAvailable = true;
    });
  },

That moves some plumbing (the .json() call, the chaining of the .then's) out of the main code.

Conclusion

I moved the code to fetch data into it's own class.

Next up, I will finally start doing some analysis on the data!