elmでhttpパッケージを使ってajax

メッセージを定義

メッセージは2種類用意する。一つはリクエストを投げるメッセージでもう一つはレスポンスを受け取るメッセージ。

分かれている理由はelmが純粋関数型で非同期処理はランタイムで処理することになってるからだと思う。

type alias User =
    { name : String
    , company : String
    }

type Msg
    = ReqUser
    | FetchUser (Result Http.Error User)

リクエス

Http.getでリクエストを作成してHttp.sendでCmdを発行する。レスポンスを処理するメッセージとDecoderも必要。

Http.getの時点でCmdが発行されないのが不思議だなと思ったけどそういうものらしい。

            let
                url =
                    "https://api.github.com/users/octocat"
            in
                ( model, Http.send FetchUser (Http.get url userDecorder) )

レスポンス

ここはわたってきたデータをよしなにするだけ。

        FetchUser (Ok data) ->
            ( toString data, Cmd.none )

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

Decoder

jsonのdecodeは前やったので省略。

elmでJSONをEncode/Decode - lisp719のブログ

userDecorder : Decoder User
userDecorder =
    map2 User
        (field "name" string)
        (field "company" string)

その他

  • getとpostは関数が用意されてるけどそれ以外のMethodはrequest関数で行う
  • 並列でリクエストを投げるようなときはどうするのか。Taskを使う?

参考