ApiFetch pass variable from function JS

Question

I make an api call to an endpoing and inside the apiFetch I get a value. I want to display this value from outside the function but it doesn't get updated. Any ideas why it does this?

save: () => {
          var newValue="default";
          apiFetch( { path:'/url', } ).then( res => {
          newValue = (res[0].value);

          // this shows the new value
          console.log(newValue);

      } );
      //this shows "default"
      return <p>{newValue}</p>
    }

score 0 · Answer 1 · answered Mar 13 '20 at 15:11

Your function is asynchronous, you can use async/await

save: async () => {
  const response = await apiFetch( { path:'/url', } );
  const newValue = response[0].value;
  console.log(newValue);
  return <p>{newValue}</p>
}

Then, inside your caller block:

const newValueParagraph = await yourobject.save();

score 0 · Answer 2 · answered Mar 13 '20 at 15:12

0

It looks like you need to return your Promise. Right now you make the async request to the api, and while that's doing it's thing you return newValue which is still just 'default.

Try like this:

save: () => {
  var newValue = "default";
  return apiFetch({ path: '/url', }).then(res => {
    newValue = (res[0].value);

    // this shows the new value
    console.log(newValue);
    return <p>{newValue}</p>
  });
}

answered Mar 13 '20 at 15:12

spirift

2,136
11
16

This doesn't return the
for some reason. It doesn't show any error but it doesn't display the html
– Jay ww Mar 13 '20 at 15:18
Can you post the code where you use this save method – spirift Mar 13 '20 at 15:34

ApiFetch pass variable from function JS

2 Answers2