scalajs-react 路由器。如何在条件路由中执行 ajax 请求答案

【问题标题】：scalajs-react router. How to perform ajax request inside conditional routescalajs-react 路由器。如何在条件路由中执行 ajax 请求
【发布时间】：2018-12-12 19:54:24
【问题描述】：

我正在尝试制作一些有条件的路线。条件在服务器端解决。

路由规则示例：

| (dynamicRouteCT("#user" / long.caseClass[User]) ~> dynRender((page: User) => <.div("Hello, " + page.id.toString)))
  .addCondition((page: User) => checkPermissions(page.id))(_ => Some(redirectToPage(Page403)(Redirect.Push)))

checkpermissions正文：

  def checkPermissions(id: Long) = CallbackTo.future{
    /*Ajax.get(s"http://some.uri/?id=$id") map (res =>
     * if (something) true
     * else false
     * )
     */

    //the request before returns Future[XMLHttprequest] witch maps to Future[Boolean]
    Future(false)
  }

我在这里遇到类型不匹配：(page: User) => checkPermissions(page.id)

是否可以在条件路由中执行 ajax 请求？

【问题讨论】：

标签： scala routing scala.js scalajs-react

【解决方案1】：

如果我们查看def addCondition(cond: Page => CallbackTo[Boolean])(condUnmet: Page => Option[Action[Page]]): Rule[Page]，我们可以看到它需要CallbackTo[Boolean]。由于 JS 环境的性质，现在可以从 Future[A] 到 A。虽然它不是 scalajs-react 本身的限制，但它是一个继承的现实，会影响你的 scalajs-react 代码；正如this table in the doc 所示，没有办法从CallbackTo[Future[Boolean]] 转到CallbackTo[Boolean]。

这种类型级别的限制实际上对用户体验来说是一件非常好的事情。路由器是同步的，它必须立即决定如何渲染路由和路由变化。如果允许它是异步的并且以某种方式支持Futures，那么用户将体验到明显的（并且可能是巨大的）延迟，而没有任何视觉反馈或中断方式。

解决此问题的“正确方法”是使用涵盖异步状态的模型。这就是我会做的：

创建一个 AsyncState[E, A] ADT 与案例：Empty、AwaitingResponse、Loaded(value: A)、Failed(error: E)。
（如果需要，您可以进一步丰富这些，例如 Loaded 上的 loadTime ，Failed 上的重试回调，AwaitingResponse 上的 timeStarted 等）
在您的（本地/客户端）状态中有一个 AsyncState[Boolean] 实例。
可选择在页面启动时启动异步加载。
让路由器将其值传递给组件和/或检查 this 的值。
（路由器不会知道该值，因为它是动态的，请在理解中使用 Callback把事情联系起来并满足类型。）
根据AsyncState[Boolean] 的值，呈现对用户有意义的内容。如果是AwaitingResponse，显示一个小微调器；如果失败，则显示错误并可能显示重试按钮。

（还应该注意，AsyncState[Boolean] 实际上不应该是 Boolean，因为这对领域来说不是很具描述性或真实性。它可能会像 AsyncState[UserAccess] 或类似的东西更有意义。）

希望对您有所帮助！祝你好运！

【讨论】：