how make multiple async/await in javascripts -

Question

I need to Execute one function as a result of another function like as chain. I explain details on my code below.

const setter = async () => {
  //this my first request that puts data in property value work right and get data.
  setPropertyvalue(await (getpropertvalue(slide.slide, 0)));

  const lat2 = parseInt(await return_value(propertyvalue, "geolocation_lat"));
  //upper two const lat2&long2 depend on setpopertyvalue
  const long2 = parseInt(await return_value(propertyvalue, "geolocation_long"));   

  setTimeout(() => { //and this code is running after all/ I consider time
    setGeo({ ...geo, lat: lat2, long: long2 });
  }, 2000);

};

setter(); // put this function in onload event

my problem = second part of code isn't work properly they just return NAN value - I think they are running before first part but I need to run these code after first part;

Answer 1

The process to update React state is asynchronous for performance reasons. That's why changes don't feel immediate.

Try this code it's help you

const setter = async () => {
  let proertyVal = await (getpropertvalue(slide.slide, 0))
  setPropertyvalue(proertyVal)

  const lat2 = parseInt(await return_value(proertyVal, 'geolocation_lat'))
  const long2 = parseInt(await return_value(proertyVal, 'geolocation_long'))
  //upper two const lat2&long2 depend on setpopertyvalue

  setTimeout(() => { //and this code is running after all/ I consider time
    setGeo({ ...geo, lat: lat2, long: long2 })
  }, 2000);

}
setter(); // put this function in onload event
  }

Answer 2

The value of propertyvalue is assigned when you call const [propertyvalue, setPropertyvalue] = useState() .

Your setter function has closed over that variable.

Next time the component renders you will have a new propertyvalue variable with the latest value from the state, but that won't help you here.

---

await (getpropertvalue(slide.slide, 0)) gives you the value that you want, so store that in a local variable and use that.

const updatedPropertyvalue = await (getpropertvalue(slide.slide, 0));
setPropertyvalue(updatedPropertyvalue);
// continue to use updatedPropertyvalue in the rest of the function

Answer 3

You don't really need to set the propertyValue to state here, just use it in the next async calls. Also there's no need for setTimeout here and the whole function can be simplified as follows:

const setter = async () => {
  const propertyValue = await getpropertvalue(slide.slide, 0);

  const lat2 = await return_value(propertyValue, "geolocation_lat");
  const long2 = await return_value(propertyValue, "geolocation_long");

  setGeo({ ...geo, lat: parseInt(lat2), long: parseInt(long2) });
};

Answer 4

Ok promises should rather work, with promise each function will have to resolve in order for the next to work.

async function todos(){
 await(fetch({url:'',method:''})).
 then((res)=>{}).
 then((res)={}).
 catch((err)=>)
}