2

I want to use my fetched values in another function

I'm really new to JS. So until now I tried this.setState() and a return value of the function . 

async fetchData() {

    const url = 'http://localhost:8080';
    const response = await fetch(url);
    const data = await response.json();
    // stringify JSON
    var myJSON = JSON.stringify(data);
    // parsing to JS object
    var jsonData = JSON.parse(myJSON);
 }

until now, I'm getting a Promise with the status "pending" . How do I get the actual value?

KurgerBing
  • 173
  • 1
  • 2
  • 16
  • An `async` function can only ever return a promise. Use `fetchData().then(...)`, or `await fetchData()` (if you add `return data`). Or use it directly there, inside `fetchData`. (Also, note that `data` is already parsed data, the last two lines after it are useless.) – Amadan Jan 04 '19 at 07:48
  • 2
    `data` is an Object. Why would you turn it into a JSON string only to parse it right back into an object? Just use `data`. Anyway, this function doesn't return anything, and it doesn't call `setState()`. Please add all relevant code to your question. –  Jan 04 '19 at 07:48

1 Answers1

3

When you mark the function as async that implicitly wraps any return value it has with a Promise. You're not actually returning anything, so fetchData will just return a Promise that resolves to undefined.

So first, you need to actually return something from your function:

async fetchData() {
  const url = 'http://localhost:8080';
  const response = await fetch(url);
  const data = await response.json();
  return data; // It should already be parsed JSON since you called `response.json()`
}

Then you need to wait for the Promise to complete in the calling function:

// You can use async/await
async someOtherFunction() {
  const value = await fetchData();
  // Do things...
}

// Or use .then
someOtherFunction() {
  fetchData().then((value) => {
    // Do things...
  });
}
Matthew Herbst
  • 29,477
  • 23
  • 85
  • 128
  • Also this link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API can be useful to anyone who need complete documentation, maybe you should add it to your answer ? – JeuneApprenti Jan 04 '19 at 07:59
  • okey maybe I don't understand the procedure, but when I return the value of the someOtherFunction(), it gives me the same Promise - pending situation. I try to call it in my ComponentDidMount() . Did I understand something wrong? – KurgerBing Jan 04 '19 at 08:11
  • @KurgerBing again, you need to wait for it: `componentDidMount() { fetchData.then((value) => this.setState({ key: value })) }` – Matthew Herbst Jan 04 '19 at 08:21
  • @MatthewHerbst when I'm calling this.state.key in componentDidMount() it's empty, and yes I initialized it in the constructor. I'm really confused. – KurgerBing Jan 04 '19 at 09:05
  • You'll have to post more of your code. You likely should ask in a separate question – Matthew Herbst Jan 04 '19 at 09:42
  • 1
    ok, I got it! I used your advices, but instead of getting out the return I build in my logic after the `await fetchData()` . Now I can use the values without problems. Thanks again for your patience :D – KurgerBing Jan 04 '19 at 11:12
  • how to call it in native javascript any idea? – kushal Baldev Apr 18 '23 at 11:13
  • @kushalBaldev all of the above is native JavaScript and should work in any modern browser without needing to be transpiled. – Matthew Herbst Apr 19 '23 at 04:29