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

【问题标题】：What is the best way to pass a promise between screens and awaiting for result, reducing wait times在屏幕之间传递承诺并等待结果的最佳方式是什么，减少等待时间
【发布时间】：2020-01-30 15:29:23
【问题描述】：

我的目的是减少用户在转换到需要来自 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){}
}

次要的：是否应该在第一次返回 promise 的屏幕 1 中有一个 try/catch？

【问题讨论】：

“屏幕”是不同的页面吗？也就是说，当你从“屏幕1”移动到“屏幕2”时，全局环境是否被拆除并重新创建？
“在屏幕 1 中是否应该有一个 try/catch 在第一次返回承诺” 每个问题问一个问题，而不是两个问题。解决第二个问题：Promise 的基本规则之一是：要么处理错误，要么将 Promise 传递给其他东西（处理错误，或将 Promise 传递给...）。
@T.J.Crowder 是的，我主要是在移动环境中发言，但这同样适用于网络。因此，例如，在 web 中，这将是一个 react-router 转换。
有什么原因不能lift the state up 组件树并在父级中处理异步调用？
@krisaoe 例如，在 react-router 中，我正在路由器内部的 Switch 组件内的屏幕之间切换，目前没有任何状态保持在该级别，因为它或多或少是应用程序的最高级别语境。在一个有 100 多个页面的应用程序中，必须有一个非常通用的解决方案，比如 redux 等。

标签： javascript reactjs promise

【解决方案1】：

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

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

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

【讨论】：

“屏幕 1 中的 try/catch 只会捕获同步错误，而不是承诺拒绝。” 如果它在 async 函数中，则不是这样。我们在“屏幕 1”代码中没有任何调用上下文...
我们知道它是在没有 await 关键字的情况下被有意调用的，因此如果它被包装在 try/catch 中，则只会处理同步错误。在这种情况下，屏幕 1 上的函数是否被标记为异步并不重要，重要的是它没有使用 await 关键字。
该行有一条评论说“故意不等待”，我没有阅读任何内容:)
哈！就是这样，我正在查看第一个代码块。我仍然会澄清答案的那部分。不会花很多时间。