how to get result data from async fetch inside another function

Question

I'm trying to use async fetch call to get data from the server but the result looks like an empty async function. what am I doing wrong?

this is my code

  function initAutoComplete (selector, params = []) {
    let config = {
      selector: selector, 
      data: {
        src: async () => {
          try {
            let myurl = `/component/get_states?country_id=64`; // http://localhost
            const response = await fetch(myurl)
            const source = await response.json();
            console.log('source', source); // ==> this doesn't even appear in the console log
            return source;
          } catch (err) {
            return err;
          }
        },
        keys: ["state_name"],
        cache: true,
      },
    };
    console.log('config', config.data);
    return config;
  }
  const asd = initAutoComplete('#state_name');
  console.log('asd', asd.data);

this is the result in the developer tools

although when I used postman to test the url, it shows the data as expected

[
    {
        "id": "17",
        "state_name": "Bali",
        "country_name": "Indonesia"
    },
    {
        "id": "16",
        "state_name": "Banten",
        "country_name": "Indonesia"
    },
    {
        "id": "7",
        "state_name": "Bengkulu",
        "country_name": "Indonesia"
    },
]

Your code shows calling initAutoComplete(), but all that does is define a config object that contains a data.src() function, but nothing you show ever calls that function. So, per this code that function is never executed and never should be. The function has been defined, but not called. You would use asd.data.src().then(...).catch(...) to call it. — jfriend00
– jfriend00, Commented Apr 11, 2022 at 6:57
Yeah, call the function and get the resolved value from the promise. See my answer below. — jfriend00
– jfriend00, Commented Apr 11, 2022 at 7:04

jfriend00 · Accepted Answer · 2022-04-11 07:00:19Z

Your code shows calling initAutoComplete(), but all that does is define a config object that contains a data.src() function, but nothing you show ever calls that function.

So, per this code that function is never executed and never should be. The function has been defined, but not called.

You would use this:

const asd = initAutoComplete('#state_name');
asd.data.src().then(result => {
    console.log(result);
}).catch(err => {
    console.log(err);
});

to actually call that async function.

In addition, return err is probably the wrong way to do error handling in your src() function. You WANT the promise that the async function returns to reject when you get an error. As you're doing it now, it's quite a pain for the caller to tell the difference between a result and an error condition since you're just returning a value both ways. The caller would probably have to check the resolved value to see if it was an instanceof Error to discern if the result was an error or not.

If you remove the try/catch in your src() function, then the reject will happen automatically which is likely what you want.

Collectives™ on Stack Overflow

how to get result data from async fetch inside another function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related