我需要在组件安装时从AsyncStorage获取一些信息,但我知道这样做的唯一方法是使componentDidMount()函数异步.
async componentDidMount() {
let auth = await this.getAuth();
if (auth)
this.checkAuth(auth);
}
这有什么问题,还有其他解决方案吗？
让我们首先指出差异并确定它如何引发麻烦.这是async和“sync”componentDidMount()生命周期方法的代码：
// This is typescript code
componentDidMount(): void { /* do something */ }
async componentDidMount(): Promise<void> {
/* do something */
/* You can use "await" here */
}
通过查看代码,我可以指出以下差异：
> async关键字：在打字稿中,这只是一个代码标记.它做了两件事：
>强制返回类型为Promise< void>而不是无效.如果您明确指定返回类型为非承诺(例如：void),则typescript将向您发出错误.
>允许您在方法中使用await关键字.
>返回类型从void更改为Promise< void>
>这意味着你现在可以这样做：
async someMethod()：Promise< void> {等待componentDidMount(); }
>您现在可以在方法中使用await关键字并暂时暂停其执行.像这样：
async componentDidMount(): Promise<void> {
const users = await axios.get<string>("http://localhost:9001/users");
const questions = await axios.get<string>("http://localhost:9001/questions");
// Sleep for 10 seconds
await new Promise(resolve => { setTimeout(resolve, 10000); });
// This line of code will be executed after 10+ seconds
this.setState({users, questions});
return Promise.resolve();
}
现在,他们怎么会引起麻烦？
> async关键字绝对无害.
>我无法想象你需要调用componentDidMount()方法的任何情况,所以返回类型Promise< void>也是无害的.
调用返回类型为Promise< void>的方法没有await关键字与调用返回类型为void的一个没有区别.
>由于componentDidMount()延迟执行后没有生命周期方法,因此看起来非常安全.但是有一个问题.
比方说,上面的this.setState({users,questions});将在10秒后执行.在延迟时间的中间,另一个……
this.setState({users：newerUsers,questions：newerQuestions});
…已成功执行并且DOM已更新.结果对用户可见.时钟继续滴答,10秒钟过去了.然后执行延迟的this.setState(…)并再次更新DOM,那个时间用旧用户和旧问题.用户也可以看到结果.
=>使用componentDidMount()方法的异步非常安全(我不确定100％).我是它的忠实粉丝,到目前为止我还没有遇到任何让我头疼的问题.