在屏幕之间传递承诺并等待结果的最佳方法是什么，从而减少等待时间

Question

我的目的是减少用户过渡到需要API数据的屏幕时的等待时间。

目前是这样的，fetchSomeData返回一个承诺：

// Screen 1
this.navigateToScreenTwo()
// Screen 2
async componentDidMount(){
try {
const data = await fetchSomeData()
this.setState({ data })
} catch(e){}
}

我想做的是启动承诺，将其传递到导航状态下的下一个屏幕，然后在下一个屏幕中等待其结果。由于屏幕转换需要 300 毫秒，因此这足以从 API 获取结果，从而使转换和数据加载无缝。

做这样的事情是好习惯吗？如果没有，最好的方法是什么？

// Screen 1
const dataPromise = fetchSomeData() // purposely without await
this.navigateToScreenTwo({ dataPromise }) // pass promise in navigation
// Screen 2
async componentDidMount(){
try {
const data = await this.navigation.dataPromise // the promise from navigation state
this.setState({ data })
} catch(e){}
}

不太重要：是否应该在屏幕 1 中首先返回承诺的尝试/捕获？

Answer 1

这可能有效，只要您已经确认navigateToScreenTwo的实现没有任何问题，并且只要它在足够简单的应用程序中。

但这不是一个非常易于维护的策略，并且不遵循正常的 React 模式。与其这样，我会使用跨组件工作的状态管理系统，例如 React Context、Mobx、Redux 或任何其他选项中的任何一个。异步作业将通过更新应用程序状态结束，并且根本不需要传递。

屏幕 1 中的 try/catch 只会捕获同步错误，而不会承诺拒绝。在大多数情况下，这不太可能是必需的，但这取决于fetchSomeData是否可能同步抛出错误(在返回承诺之前(。