Get data from Javascript fetch and display it in another function

Question

I thought it would be easy to find an answer to this, but it wasn't. I'm trying to make an api call from a function and then display the response in a different function. What I've got or what I want to achieve:

async getData() {
   const response = await http.get("/api/");
}

async showData() {
   const result = await this.getData();
   console.log(result);
}

Any help is appreciated!

Does this answer your question? [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — Taplar, Nov 04 '20 at 15:49
`getData` does not return anything. And `const` are block scoped. — Taplar, Nov 04 '20 at 15:49
Remove async from getData and return http.get('/api/') from it. — Pratyush Sharma, Nov 04 '20 at 15:50

Mr. Polywhirl · Accepted Answer · 2020-11-04T17:54:42.690

3

The getData method shouldn't need to be declared async. Just make showData an async method and await the getData response.

const getData = () => fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json());

const showData = async () => {
  const result = await getData();
  console.log(result);
}

showData();

Here is the altered code:

getData() {
   return http.get("/api/");
}

async showData() {
   const result = await this.getData();
   console.log(result);
}

edited Nov 04 '20 at 17:54

answered Nov 04 '20 at 15:57

Mr. Polywhirl

42,981
12
84
132

Thank you for the answer, and your time, I appreciate it! I'm not that confident in fetch or api calls. – pistevw Nov 04 '20 at 16:09

Get data from Javascript fetch and display it in another function

1 Answers1