0

I've tried every different version I can find to try to extract the text from fetching a file and save it to a variable to be accessed outside of the async function used to fetch it, but I just can't figure out what I'm doing wrong. I know the fetch is working because I can get the file data to print from inside the function. The current version of one of my attempts looks like this:

  async function getData(filePath) {
    await fetch(filePath)
      .then(response => {
        return response.text()
      })
    .then(data => alert(data))
    .catch(error => alert(error))
  }
  alert(getData('./2021WeatherData.csv'))

This first creates two alerts (can't figure out why everything is happening multiple times but I'll worry about that later) that read "[object Promise]", and then two more with the actual file contents. So I know the async function is returning a Promise and I know I am able to extract the text from the file within the function.

This question/solution (async/await implicitly returns promise?) tells me the result of an async function is always a Promise even if within the function you return a string, number, etc. I've tried throwing .text() onto the end, but when I do that I get "TypeError: getData(...).text is not a function".

One thing I can't wrap my head around is why the alert associated with alert(getData('./2021WeatherData.csv')) occurring before the alert for .then(data => alert(data)). It seems getData would need to complete its course to return the Promise object to the getData call alert and in the process would trigger the internal .then(data => alert(data)) prior to doing that. I don't know if this is relevant because one of my attempted methods was to create a global variable outside of the async function like so:

  let theData = 'blank'
  const getData = async function (filePath) {
    fetch(filePath)
      .then(response => response.text())
      .then(response => {
        theData = response
        alert(theData)
        return theData
      })
  }
  alert(getData('./2021WeatherData.csv'))
  alert(theData)

Here, the alert for alert(getData('./2021WeatherData.csv')) pops up first as "[object Promise", followed by alert(theData) providing the default value of "blank" it was initialized with, and then finally alert(response) within the function provides the actual file contents. Very much the same as without the global variable. I just can't figure out why the execution is moving from the getData call down to the alert(theData) execution before completing the run through the function and updating theData.

I know I'm showing how little I know about async/await, promises, etc. I'm just at my wits end and don't know what to do. Thank you in advance.

SunnyNonsense
  • 410
  • 3
  • 22
  • `const getData = async function (filePath) { return fetch(filePath)` then `getData().then(processResult)` where `processResult` is the function that takes the data and does whatever you need to do with it – CertainPerformance Sep 06 '21 at 04:28
  • So the thing I'm struggling with most here is what happens if you need to use the data multiple times? You have to re-fetch the data every time because it lives within that promise? What if you've manipulated the data and want to store that? Or needed to merge data from two separate fetches? There's some fundamental concept I'm failing to understand. – SunnyNonsense Sep 06 '21 at 19:04
  • Make the async call the entry point. `getData().then(runProgram)` where `runProgram` contains everything that depends on it - which could be your entire script. – CertainPerformance Sep 06 '21 at 19:07
  • So let's say the only thing on the page is a graph that I want to display the data from 20 different CSV files (or 100, who cares) depending on which ones the user has selected, I have to fetch all of those files (and data) upfront and then manipulate it as necessary, and control what does and does not graph from within the async function? In the case of a very large amount of data/files, wouldn't that waste memory to not selectively fetch the files as needed? Thanks for sticking with me. – SunnyNonsense Sep 06 '21 at 19:15
  • Course there's no need to retrieve everything, fetch *only the files* that you need. If this is after user input, you'll have to implement logic for that. – CertainPerformance Sep 06 '21 at 19:16
  • So I think the ultimate question that may be tripping me up is WHY is it impossible to extract the data from the promise? I know there's a reason, and understanding that might help me understand the thing as a whole. Contrary to my original post, I understand at least the basics of async, but given an infinite amount of time, everything should resolve and the data should be there waiting to be stored in a variable :) But returning it from the async function just puts it back in another promise and my mind is melted. – SunnyNonsense Sep 06 '21 at 19:26
  • It's not remotely impossible - you just need to call `.then` on the Promise. It's really as simple as that. – CertainPerformance Sep 06 '21 at 19:27

0 Answers0