1

I'm trying to protect my API key using a Netlify function (a modified return-env.js) that grabs and outputs an environment variable. Since my project is in vanilla JS, I then have to grab the key from the function in order to use it. But this is where it gets difficult.

Currently I have:

function getKey() {
  (async ()=> {
    const response = await fetch('/.netlify/functions/return-env')
    const resObj = await response.json()  
    console.log(resObj);
    return resObj;
  })();
}
console.log("my key " + getKey())

const Airtable = require('airtable');
const base = new Airtable({apiKey: 'EXAMPLE-API-KEY'})

getKey() always returns undefined, as would resObj if logged outside the function. What's missing here?

east1999
  • 199
  • 5
  • 15
  • 1
    Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Ivar Aug 16 '20 at 12:41
  • Thank you. I know it's a duplicate question and I've looked at all those threads. Perhaps I haven't got my literature right. Most approaches still seem overly complex to me, since all I want is to get something from the URL and pass it to a variable. – east1999 Aug 16 '20 at 12:47
  • 1
    The issue is that these happen in a different order. Your fetch is asynchronous and the rest of your code will not wait for it to finish. So the `console.log` and the rest of your code is executed before your `resObj` is returned. There is not really a way around this. The easiest would be to move your code into the async function where you are now returning the value. – Ivar Aug 16 '20 at 12:50
  • The problem, since the API key is structural to starting the whole shebang, I then have to move everything to asynchronous, which doesn't really make sense. Can I a) force it resolve immediately or b) move to synchronous? – east1999 Aug 16 '20 at 12:58
  • 1
    No, that is not possible. You can put everything into a function (or split it up in multiple functions) and call that function after the fetch has resolved. You could also make `getKey` `async` (and remove the async IIFE) and then use `await` when you call `getKey`. But that still requires you to put everything into a function, since you can only use `await` inside an `async` function. – Ivar Aug 16 '20 at 13:06
  • Ok, so I changed my updateTable function. It started right after those variables, and now it starts with fetch -> then(getjson) -> then(execute the rest of the code, starting with those variables). I got it from [here](https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data) as I read more about `fetch` and considered your answer. It works! I just don't know whether this will expose the key — but that wasn't the question. – east1999 Aug 16 '20 at 13:28

1 Answers1

1

getKey will return undefined because you are not returning anything in the function call

function getKey() {
  return (async ()=> {
    ...
  })();
}

It will now return a promise which you can then chain or await, awaiting would require it to be in an asynchronous function.

if you just wanted to .then() off it:

getKey().then((key) => {
  // do something with the key object
}
Krispies
  • 100
  • 3
  • 12