http - ELM-LANG 如何在单击浏览器后退按钮时发出 http 请求

Question

我有一个类似 /user/3 的 url，我在其中发出 http 请求以获取用户信息。

如果我移动到 /user/6，我将发出另一个 http 请求来获取此用户数据。

我的问题是当我点击浏览器后退按钮时，url 移回 /user/3 但它仍然显示 user 6 信息。 p>

我该怎么做？是否有可能让我的旧模型恢复原状？还是我必须再次发出 http 请求才能获取 user 3。

我的 urlUpdate 看起来像这样:

urlUpdate : Result String Route -> Model -> ( Model, Cmd Msg )
urlUpdate result model =
  let
    currentRoute =
      Routing.routeFromResult result

  in
      ( { model | route = currentRoute }, Cmd.none )

我有点迷路了，我不知道在哪里做这个。

如果不清楚，我想在用户单击浏览器后退按钮以获取旧 url 时“捕获”一个事件，然后发出 http 请求以再次获取此用户信息。

我使用 elm-navigation 包。

我已尝试在我的 urlUpdate 中执行此操作:

urlUpdate : Result String Route -> Model -> ( Model, Cmd Msg )
urlUpdate result model =
  let
    currentRoute =
      Routing.routeFromResult result

    command =
      case currentRoute of
        Routing.HomeRoute ->
          getUsers
        Routing.userRoute id ->
          getUser id
        Routing.NotFoundRoute ->
          Cmd.none

  in
      ( { model | route = currentRoute }, command )

这和我的初始化函数是一样的。它不起作用，因为它使无限循环执行 urlUpdate

Answer 1

假设您正在使用 elm-lang/navigation 模块。 urlUpdate 在 url 更改时被调用(包括 点击浏览器导航按钮)。

因此，处理 url 更改的一种方法是返回 Http 访问命令而不是 Cmd.none 在 urlUpdate 函数的第二个返回值中。 当 Task 解决或失败时，将抛出 Msg(在本例中为 FetchFail 或 FetchScucceed)，因此 您可以通过更新您的模型来使用react。

在下面的示例中，我更新了模型以便您可以显示微调器 直到 API 调用解决。

示例:

urlUpdate : Result String Route -> Model -> ( Model, Cmd Msg )
urlUpdate result model =
  case result of
    Ok url ->
      let
        userId = getUserId url
      in 
        ({ model | spinner = True }, getUserInfo userId )
    Err _ -> 
        ({ model | showErr = True }, Cmd.none )

-- API call
getUserInfo : String -> Cmd Msg
getUserInfo str =
  let
    decodeUserInfo = Json.at ["args", "userid"] Json.string
    url = "https://httpbin.org/get?userid=" ++ str
  in
    Task.perform FetchFail FetchSucceed (Http.get decodeUserInfo url)