如何在 javascripts 中制作多个 async/await -

Question

我需要执行一个函数作为另一个函数的结果，比如链。我在下面解释了我的代码的细节。

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

我的问题 = 代码的第二部分无法正常工作，它们只是 return NAN 值 - 我认为它们在第一部分之前运行ning 但我需要运行这些第一部分之后的代码 ;

Answer 1

出于性能原因，更新 React state 的过程是异步的。这就是为什么变化不会立竿见影的原因。

试试这个代码对你有帮助

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

propertyvalue 的值是在调用 const [propertyvalue, setPropertyvalue] = useState() 时赋值的。

您的 setter 函数已关闭该变量。

下次组件呈现时，您将拥有一个新的 propertyvalue 变量，其中包含来自状态的最新值，但这对您没有帮助。

await (getpropertvalue(slide.slide, 0)) 为您提供所需的值，因此将其存储在局部变量中并使用它。

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

Answer 3

你真的不需要在此处设置 propertyValue 状态，只需在下一个异步调用中使用它即可。另外这里不需要setTimeout，整个函数可以简化为：

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

好的 promises 应该更有效，有了 promise，每个功能都必须解决才能让下一个功能正常工作。

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

如何在 javascripts 中制作多个 async/await -

how make multiple async/await in javascripts -

javascript

asynchronous

async-await

reactjs

react-hooks