JavaScript和HTML - 重用来自fetch（）的数据

Question

I am retrieving a JSON file from my server using a basic fetch request as follows:

function getDailyTranscripts (url) {
  fetch(url)
    .then(validateResponse)
    .then(readResponseAsJSON)
    .then(useDailyResult)
    .catch(logError)
}

This retrieves a master JSON file that I'm then creating variables from to populate multiple charts in a single html page using charts.js

Currently I can make this work for an individual chart by running the code in the useDailyResult() function that is part of my fetch function. However, I will need to repeat this pattern for all of my charts individually and duplicate a lot of code, as well as server calls, with my current implementation.

Here's the current useDailyResult function for one of my charts as an example:

function useDailyResult (result) {

  var labels = Object.keys(getUsersByChannel2(result))
  var data = Object.values(getUsersByChannel2(result))

  var ctx = document.getElementById('chartOops').getContext('2d');
  var chart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: labels,
      datasets: [{
        label: 'Channels',
        data: data
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Users by Channel'
      },
      legend: {
        position: 'bottom'
      },
      scales: {
        gridLines: {
          display: false
        }
      },
      plugins: {
        colorschemes: {
          scheme: chartColorScheme
        }
      }
    }
  });
}

The end result I want to get to is to retrieve the JSON file once from the server, store it locally (eg using HTML5's local storage), and then run all of my chartjs code against the locally-stored file. That way I can reduce the code and number of server calls.

I'm not sure the best way of doing this as the only way I know to access the JSON file is from within the fetch function. I've also been looking into using Backbone.js as this could be a useful library.

Answer 1

You can reuse the data fetched from the server if you just assign it to a variable your function has access to.

If you had another then in your chain that assigns to a var, then you can check that var before doing another fetch.

var remoteData = {}

function getDailyTranscripts (url) {
  // check for existing response data based on url param
  if(remoteData[url]) {
    console.log('using pre-fetched data from memory')
    useDailyResult(remoteData[url])
  }
  else {
    console.log('fetching from server', url)
    fetch(url)
      .then(validateResponse)
      .then(readResponseAsJSON)
      .then(jsonData => {
        // assuming readResponseAsJSON returns what you want
        remoteData[url] = jsonData
        useDailyResult(jsonData)
      })
      .catch(logError)
  }
}

Note that if you call getDailyTranscripts a second time while the initial fetch is still working, it will kick off another fetch. So you might want to add some logic to address that if it could be an issue for you.

It may just be best to (1) read remote data, then (2) pass it along that whatever is going to need it, if you know that ahead of time. But that just depends on your use case.

fetch(url)
  .then(validateResponse)
  .then(readResponseAsJSON)
  .then(handleAllYourChartsAtOnce) // this function could also store the json in a var
  .catch(logError)

Answer 2

You can tell a promise p to call multiple handlers when it's available by calling p.then multiple times:

let data = fetch(url)
    .then(validateResponse)
    .then(readResponseAsJSON);

Promise.all([
  data.then(useDailyResult),
  data.then(buildAnotherChart)
]).catch(logError);