初始化时的 Elm Http 请求

Question

我对 Elm 很陌生，但正在慢慢熟悉它。我正在做一些简单的 Http 请求，这些请求在各个方面都很成功（我得到要显示的数据等）

目前我只能让我的 fetchData 触发 onClick，我想在 init 上初始化它，但我无法解决这个问题。

..这是我的 fetchData 函数：

fetchData : Cmd Msg
fetchData =
  Http.get repoInfoListDecoder "http://example/api"
    |> Task.mapError toString
    |> Task.perform ErrorOccurred DataFetched

当前在视图中由 onClick 事件触发：

.....
, button [ onClick FetchData ] [ text "Load Data" ]
.....

我想避免通过按钮请求数据，而是希望在应用程序初始化时加载数据。这是我的初始化：

init =
  let
    model =
      { message = "Welcome", repos = [] }
  in
    model ! []

还有我的更新（有点被剥夺了……例如）：

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    NoOp ->
      model ! []
    ...........
    FetchData ->
      { model | message="hi" } ! [fetchData]
    ...........
    DataFetched repos ->
      { model | repos = repos, message = "The data has been fetched!" } ! []

这有意义吗？我只是在加载应用程序时难以初始化 fetchData，因此我可以显示我的数据而无需点击按钮来获取它。

提前致谢！

Answer 1

这里是 Html.App.program 的类型签名。 init 接受 Cmd，您只需在此处输入命令即可。

program
    :  { init : (model, Cmd msg), update : msg -> model -> (model, Cmd msg), subscriptions : model -> Sub msg, view : model -> Html msg }
    -> Program Never

Answer 2

当您使用 Html.program 时，您的 init 函数 returns 模型和要执行的命令的初始数据。

命令是副作用，就像 HTTP 请求一样。

尝试更改 init 使其立即运行命令：

init: (Model, Cmd Msg)
init =
  let
    model =
      { message = "Welcome", repos = [] }
  in
    model ! [ fetchData ]

Answer 3

另一种方法是使用Task，目前还没有提到。你可以试试

initWithFlags : Flags -> ( Model, Cmd Msg)
initWithFlags flags =
    ( { user = flags.user }, (Task.perform fetchData) )

初始化时的 Elm Http 请求

Elm Http Request on Init

elm