fetch function returns promise instead of object

Question

I have a function getData in functions.js, when I called in another file, scripts.js it returns promise not an object.

//------ functions.js ------

export async function getData(arg1,arg2,arg3) {

...

let result = await fetch(proxyUrl + targetUrl, requestOptions)
    .then(response => response.json())
    .catch(error => console.log('error', error));

return result
    }

When I call like this I get a Promise:

//------ scripts.js ------

import {getData} from './functions';

let result = getData(arg1,arg2,arg3)
console.log(result)

But even I called like this, I get an Error:

//------ scripts.js ------

import {getData} from './functions';

let result = awiat getData(arg1,arg2,arg3)
console.log(result)

"Uncaught SyntaxError: Unexpected reserved word"

You have a typo here `awiat` --> let result = awiat getData(arg1,arg2,arg3) — Ozgur Sar, Jan 24 '21 at 08:31
For the first snippet, it's expected, that result is not an object but a promise. And in the second, i expect `awiat` is just a typo? And if you have `await`, this is only allowed inside of an async function — derpirscher, Jan 24 '21 at 08:32

Naren · Accepted Answer · 2021-01-24T08:38:13.197

1

getData is a async functions and returns a Promise and await is only allowed inside async function.

export async function getData(arg1,arg2,arg3) {
  try {
    const response = await fetch(proxyUrl + targetUrl, requestOptions)
    return await response.json()
  } catch(err) {
    console.log(err)
    throw err
  }
}

import { getData } from './functions';

getData(arg1,arg2,arg3).then(result => {
  console.log(result)
})

OR this way

import { getData } from './functions';

const print = async () => {
  const result = await getData(arg1,arg2,arg3)
  console.log(result)
}

print()

edited Jan 24 '21 at 08:38

answered Jan 24 '21 at 08:32

Naren

4,152
3
17
28

Actually I don't want to print the object, I want to save it as an object. Here, I want to save the output of getData Function inside result. So I can use it later. – DSaad Jan 24 '21 at 11:29

Tomalak · Answer 2 · 2021-01-24T08:40:40.163

Instead of explicitly promise-based code with .then() and .catch(), use a try/catch block and an actual return statement in an async function, :

export async function getData(proxyUrl, targetUrl, requestOptions) {
    try {
        let response = await fetch(proxyUrl + targetUrl, requestOptions);
        return response.json();
    } catch (error) {
        console.log('error', error);
    }
}

Of course this function still returns a Promise. Every async function does. Promises never actually goes away, async/await only hides them. It's syntactic sugar. This is important: You cannot return a value from an asynchronous function, no amount of syntactic sugar can change that fact.

So when you call it, either await it in another async function

async function main() { 
    var data = await getData(...);
}

or use Promise semantics in a regular function:

function main() { 
    getData(...).then(data => ...);
}

Actually I don't want to print the object, I want to save it as an object. Here, I want to save the output of getData Function inside result. So I can use it later. — DSaad, Jan 24 '21 at 11:29
@DSaad Not sure what you refer to. The code in my answer does not "print" the object. You haven't really read what I wrote. — Tomalak, Jan 24 '21 at 12:25

fetch function returns promise instead of object

2 Answers2