How to return the value from an async function

Question

I have an async function that I would like to return a value from and then use.

Within the updatedStyleSheet function, I'd like to return the updated_css so that I can use it somewhere else.

async function updatedStyleSheet() {
  const res = await fetch("./prism.css");
  const orig_css = await res.text();
  let updated_css = orig_css;

  const regexp = /(?:var\(--)[a-zA-z\-]*(?:\))/g;
  let cssVars = orig_css.matchAll(regexp);
  cssVars = Array.from(cssVars).flat();

  for (const v of cssVars) {
     updated_css = updated_css.replace(v,   colors[v.slice(6, -1)]);
   };

// return updated_css ?
}

If I call this function, I get a Promise object. Rightfully so, since async functions always return a promise.

Could I return the updated_css within the updatedStyleSheet function and do something like this after?

const newSheet = updatedStyleSheet().then(css => css)

Then use the newSheet variable wherever in my script?

End Goal

Take the updated_css that contains the text contents of my CSS and use it as an href value so the user can download the stylesheet.

Edit

I attempted to add an event handler so that all the selected color values would be saved in the stylesheet once the user saves it, but it doesn't seem to work. I know it is still an issue with my understanding of promises as a whole.

What I did.

const updatedStyleSheet = async () => {
  const res = await fetch("./themes/prism.css");
  const orig_css = await res.text();
  let updated_css = orig_css;

  const regexp = /(?:var\(--)[a-zA-z\-]*(?:\))/g;
  let cssVars = orig_css.matchAll(regexp);
  cssVars = Array.from(cssVars).flat();
  console.log(cssVars)

  for await (const variable of cssVars) {
    const trimmedVar = variable.slice(6, -1)
    const styles = getComputedStyle(document.documentElement)
    const value = String(styles.getPropertyValue(`--${trimmedVar}`)).trim()

    updated_css = updated_css.replace(variable, value);
  }
  console.log(updated_css)

  return updated_css
}

const main = async () => {
  const downloadBtn = document.getElementById('download-btn')
  downloadBtn.addEventListener('click', () => {
    const updated_css = updatedStyleSheet()
    downloadBtn.setAttribute('href', 'data:application/octet-stream;charset=utf-8,' + encodeURIComponent(updated_css))
    downloadBtn.setAttribute('download', 'prism-theme.css')
  })
}

main()

I can't await the updated_css because it falls into the callback of the click event, which is a new function.

Then I did the following thinking it would work since it was top level.

const downloadBtn = document.getElementById('download-btn')
downloadBtn.addEventListener('click', async () => {
  const updated_css = await updatedStyleSheet()
  downloadBtn.setAttribute('href', 'data:application/octet-stream;charset=utf-8,' + encodeURIComponent(updated_css))
  downloadBtn.setAttribute('download', 'prism-theme.css')
})

That gave me the following error TypeError: NetworkError when attempting to fetch resource.

Yes, css in the then callback would be your returned item but it doesnt return it to the outside you will just get another promise. You cant go from async code and then back to the outside sync code — Patrick Evans
– Patrick Evans, Commented Jan 11, 2020 at 19:02
newSheet is again going to be a Promise. As @PatrickEvans said, "You can't go from async code and then back to the outside sync code". However, as you said you want to use it as an href value, you can do that inside .then(). — Ajay Dabas
– Ajay Dabas, Commented Jan 11, 2020 at 19:07

ranieribt · Accepted Answer · 2020-01-11 19:14:40Z

1

Yes. Since you're already using async/await, just create a top level async function, say main, and use the returned updated_css content after awating the promise to resolve:

async main() {
  const updated_css = await updatedStyleSheet()
  // use css as you please
}

// run program
main()

Don't mind the cost of one more function call.

answered Jan 11, 2020 at 19:14

ranieribt

1,3161 gold badge16 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dave.Q Over a year ago

I've made an edit to my question regarding this answer and adding a click event that doesn't seem to work.

Raphael Castro · Accepted Answer · 2020-01-11 19:07:23Z

1

I would collapse the promise by using the .then() function EX:

var bar = updatedStyleSheet()
bar.then(updated_css=>{
//logic goes here
});

answered Jan 11, 2020 at 19:07

Raphael Castro

1,1441 gold badge9 silver badges30 bronze badges

Comments

Martin Heralecký · Accepted Answer · 2020-01-11 19:12:49Z

0

If you need to wait for an async function to return a value (so that you can use this value afterwards), use the await keyword:

const newSheet = await updatedStyleSheet()

However, mind that awaiting blocks the execution until the function returns. This might not be the behaviour you want.

answered Jan 11, 2020 at 19:12

Martin Heralecký

5,8194 gold badges32 silver badges68 bronze badges

Collectives™ on Stack Overflow

How to return the value from an async function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related