如何使用 Elm 管理页面加载时的 HTTP 请求
免责声明：本文假设读者具备 Elm 语言和 Elm 架构的基础知识。
我目前正在学习 Elm 作为我的主要前端语言，以便与 Ruby on Rails 一起使用（关于如何使用两者的教程即将推出），在本教程中，我将尝试解释如何在页面加载时使用 JSON 解码来管理 API 调用，因为这方面的内容有点难找，所以我希望能够让您更容易理解！
创建我们的应用程序
要创建此应用程序，我们将执行以下操作：
mkdir project && elm init
本项目所需的软件包如下：
elm install elm/json
elm install elm-community/json-extra
elm install elm/url
elm install elm/http
elm install elm/core
应用程序的初始结构
我们首先要做的是定义 SPA 的初始架构，我们将使用一个，Browser.application以便我们可以将其用作init一个函数。
module Tutorial exposing (..)
import Browser
import Browser.Navigation
import Html exposing (text)
import Url exposing (Url)
type Status
= Loading
| Done
| HttpError
type alias Model =
{ name : String
, message : Status
}
type Msg
= None
| DataFetched
initialModel : Model
initialModel =
{ name = ""
, message = Loading
}
init : flags -> Url -> Browser.Navigation.Key -> ( Model, Cmd Msg )
init _ _ _ =
( initialModel, Cmd.none )
view : Model -> Browser.Document Msg
view model =
{ title = "Test"
, body = [ text model.name ]
}
update : Msg -> Model -> ( Model, Cmd Msg )
update msg _ =
case msg of
None ->
Debug.todo "TODO"
DataFetched ->
Debug.todo "TODO"
subscriptions : Model -> Sub Msg
subscriptions _ =
Sub.none
main : Program () Model Msg
main =
Browser.application
{ init = init
, update = update
, view = view
, subscriptions = subscriptions
, onUrlChange =
\_ ->
None
, onUrlRequest =
\_ ->
None
}
通过这种方式，我们定义了初始消息、初始模型以及一个非常简单的布局，以便在执行 HTTP 请求时查看模型中的信息。
定义我们的获取器和解码器
要执行 HTTP 请求，我们首先需要一个函数来注册此请求，然后需要一个解码器将此数据转换为类型化值，以便我们可以将其填充到我们的模型中。
在本教程中，我们将使用著名的“jsonplaceholder”API作为示例。
type alias Todo =
{ title : String }
fetchData : (Result Http.Error Todo -> msg) -> Cmd msg
fetchData msg =
Http.get
{ url = "https://jsonplaceholder.typicode.com/todos/1"
, expect = Http.expectJson msg jsonDecoder
}
jsonDecoder : Decoder Todo
jsonDecoder =
Json.Decode.succeed Todo
|> Json.Decode.Extra.andMap (Json.Decode.field "title" string)
解码器的工作方式是声明式地定义 API 返回的值，因此首先我们假设 API 已成功返回，Json.Decode.succeed Todo然后我们通过Json.Decode.Extra.andMap一个函数映射返回值，以定义 API 中的特定字段。
提示：您可以输入 jsonplaceholder 链接来查看返回内容。
让我们把所有东西都连接起来
现在的问题是如何把所有东西都封装到 ` initand`update函数里！开始吧！
首先，我们将扩展其中一个变体消息，使其包含 HTTP 结果。
type Msg
= None
| DataFetched (Result Http.Error Todo)
此外，还要更新我们的update函数，使其能够正确处理结果类型并提取正确的信息来更新我们的模型。
update : Msg -> Model -> ( Model, Cmd Msg )
update msg _ =
case msg of
None ->
( initialModel, Cmd.none )
DataFetched result ->
case result of
Ok data ->
( { name = data.title, message = Done }, Cmd.none )
Err _ ->
( { initialModel | message = HttpError }, Cmd.none )
最后，让我们调用我们的获取函数。init
init : flags -> Url -> Browser.Navigation.Key -> ( Model, Cmd Msg )
init _ _ _ =
( initialModel, fetchData DataFetched )
结论
我希望这篇教程能为大家提供一个快速简便的教程，讲解如何使用 Elm 在页面加载时执行 HTTP 请求。Elm 是一门非常棒的语言，我计划更多地使用它，所以我希望很快能带来更多有趣的内容！
文章来源：https://dev.to/cherryramatis/how-to-manage-http-requests-on-page-load-with-elm-74b