Javascript 将等待功能完成,而不是重新履行承诺
问题是:如果一个函数运行异步,但本身不返回承诺(返回void),那么“等待”它仍然有效。我认为只有当函数返回承诺而不是无效时,“wait”才有效 所以,在react中的异步函数中,我做了如下操作Javascript 将等待功能完成,而不是重新履行承诺,javascript,reactjs,asynchronous,Javascript,Reactjs,Asynchronous,问题是:如果一个函数运行异步,但本身不返回承诺(返回void),那么“等待”它仍然有效。我认为只有当函数返回承诺而不是无效时,“wait”才有效 所以,在react中的异步函数中,我做了如下操作 类表单扩展组件{ submitForm=异步事件=>{ event.preventDefault(); const isFormValid=wait this.validateForm(); 如果(!isFormValid){ 返回; } //一些逻辑 } validateForm=async()=>{
类表单扩展组件{
submitForm=异步事件=>{
event.preventDefault();
const isFormValid=wait this.validateForm();
如果(!isFormValid){
返回;
}
//一些逻辑
}
validateForm=async()=>{
设isValid=false;
//一些逻辑
等待这个.setState(prevState=>{});
//更多的逻辑
return isValid;//这是在setState中设置的
}
}
这里我正在等待this.setState()
,但是this.setState()
不会返回承诺,尽管它是一个异步运行的函数。起初我以为这不管用。但在调试和尝试了几次之后,它似乎起了作用。只有当this.setState
完成执行时,才会返回isValid
值(从而根据状态在内部成功设置isValid
值)。
虽然我的代码在工作,但它让我有点困惑,好像这是为什么工作。我在某个地方读到,等待直到右边的值被解析。但我认为只有当右边的表达式是一个
承诺时,这才适用。
我认为一种更有效或更正确的方法是本文中所描述的,这是有意义的,因为定制的setStateAsync
函数返回一个承诺。
对于那些无法访问本文的人,这里是相关的代码片段
类AwesomeProject扩展组件{
状态={}
SetStateSync(状态){
返回新承诺((解决)=>{
this.setState(状态,解析)
});
}
异步组件didmount(){
StatusBar.setNetworkActivityIndicatorVisible(真)
const res=等待取数('https://api.ipify.org?format=json')
const{ip}=await res.json()
等待此消息。SetStateAncy({ipAddress:ip})
StatusBar.SetNetworkActivityIndicator可视(false)
}
}
编辑:(标题由“使用等待函数而不是重复承诺”更改)
编辑2:我在发布问题之前阅读了这个问题。我确实明白,将async关键字分配给函数会将其转换为返回承诺的内容。但我不知道仅仅使用wait关键字也有同样的效果。因为我看的任何地方都没有提到这一点。正如我所说,如果setState是我定义的某个函数,那么我可以通过为它指定async关键字将其转换为承诺返回函数。但是我不知道我可以通过不分配异步而只是在调用它时使用wait来实现同样的功能。TLDR
基本上,它工作的原因是因为它是同步的
但是这个.setState()不返回承诺,尽管它是一个异步运行的函数
这就是你困惑的地方。this.setState()
方法不是异步的。或者更确切地说,它同步运行您传递给它的函数,但将延迟处理该函数的结果(函数返回的新状态),直到下一个this.render()
周期
因此,根据您的意思,这个.setState()
可以说是同步的,也可以说是异步的:
function statechanger (prevstate) {
return { foo: bar } // this return value will be handled in the future
// in other words, React will process this return
// value asynchronously
}
this.setState(statechanger); // statechanger() will be called synchronously here
React不支持异步setState()
,即使setState
的结果将被异步处理。如果需要异步使用setState
,则需要使用javascript的常规异步功能,而不是setState
提供的任何功能,例如:
something_async((result) => this.setState({ something: result }))
// or
something_async().then((result) => this.setState({ something: result }))
// or
(async () => {
let result = await something_async();
this.setState({ something: result });
})();
问题是什么?等待notAPromiseValue
将导致notAPromiseValue
@tom10271,这就是为什么等待不返回承诺的函数会起作用。我认为等待只适用于返回承诺的函数如果wait运算符后面的表达式的值不是承诺,它被转换为已解决的承诺。
异步
函数始终返回一个承诺,等待
将方便地安静地接受同步结果,而不会抛出任何错误-这是经过设计的,并在回复的specThanks中指定。无论如何,我对setState方法并不感到困惑。我知道它是如何工作的,但我这么说是为了不让Q太长。我这么说是因为,更新程序函数中更新isValid
var的逻辑将异步运行。我困惑的主要原因是我不能将setState
函数本身设置为异步(正如您所指出的),因此我认为我不能等待它,因为它是同步的。所以我想我不能再等了。但是正如tom指出的那样,使用await
与使funcasync
具有相同的结果。所以我认为我的代码应该可以工作?@Vaibhav_M不幸的是,您没有并且仍然没有显示它是异步的。我唯一能得出的结论是它不是异步的。您显示的函数正是这样的:prevstate=>{}
它的内部没有异步代码,await
不会使函数异步。相反,如果函数不是异步的,它只接受同步结果而不抱怨。汤姆错了。正是async
使函数异步谢谢,我想是的。我想这就是为什么我更困惑的原因。无论如何,prevState=>{}
是setState中的更新程序函数,我认为它运行的是async
,而setState本身运行的是sync
。但正如您所指出的,updater函数也运行sync
,它唯一的返回是async
(我猜这是内部的react)。如果是的话,我想是的