Cookbooks
Elm
Chapter 11. HTML and the Web
Sending an HTTP request

Elm:
Sending an HTTP request

How to:

Alright, code time. Elm makes HTTP requests using the Http module. Here’s a quick example to fetch some JSON:

import Http
import Json.Decode as Decode

type alias User =
    { id : Int
    , username : String
    }

userDecoder : Decode.Decoder User
userDecoder =
    Decode.map2 User
        (Decode.field "id" Decode.int)
        (Decode.field "username" Decode.string)

fetchUser : Cmd Msg
fetchUser =
    Http.get
        { url = "https://api.example.com/user/1"
        , decoder = userDecoder
        }
        |> Http.send UserFetched

type Msg
    = UserFetched (Result Http.Error User)

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
    case msg of
        UserFetched (Ok user) ->
            ({ model | user = Just user }, Cmd.none)

        UserFetched (Err _) ->
            (model, Cmd.none)

Sample output when UserFetched is an Ok user:

{ id = 1, username = "ElmerFudd" }

Deep Dive

Sending HTTP requests isn’t new; it’s been the backbone of web communication since the 90s. Elm wraps up the complexity in the user-friendly Http module, focusing on safety and simplicity. Unlike the early days, Elm abstracts away the messy bits like XMLHttprequest and JSON parsing. Alternatives like using JavaScript’s Fetch API or XMLHttpRequest directly are possible with ports, but Elm’s built-in way keeps your code type-safe and pure. It handles side-effects through its powerful architecture without compromising your app’s reliability.

See Also

For more detailed explanations and troubleshooting, check out these resources:

Parsing HTMLSending an HTTP request with basic authentication