使用elm进行HTTP调用以修改数据_Elm

使用elm进行HTTP调用以修改数据

elm

使用elm进行HTTP调用以修改数据,elm,Elm,如图所示，我创建了一个小示例程序，其中有一些控件可以修改模型的某些部分我一直试图做的是发出一个HTTP请求以获取初始数据（它现在是硬编码的），或者稍后在收到重置消息时用来自所述HTTP请求的响应替换数据，但没有成功。我确实读过《榆树简介》，但我似乎无法把事情拼凑起来我们的目标是拥有一个loadTraits函数，它接受一个字符串（SomeId）并返回一个TraitWithRelevance类型的列表，这样我就可以用传入的数据替换模型 module Main exposing (..) im

如图所示，我创建了一个小示例程序，其中有一些控件可以修改模型的某些部分

我一直试图做的是发出一个HTTP请求以获取初始数据（它现在是硬编码的），或者稍后在收到重置消息时用来自所述HTTP请求的响应替换数据，但没有成功。我确实读过《榆树简介》，但我似乎无法把事情拼凑起来

我们的目标是拥有一个loadTraits函数，它接受一个字符串（SomeId）并返回一个TraitWithRelevance类型的列表，这样我就可以用传入的数据替换模型

module Main exposing (..)

import Html exposing (Html, button, div, text, input, ul, img)
import Html.Attributes as Attr
import Html.Events exposing (onClick, onInput)
import Http exposing (..)
import Json.Decode as Decode


main =
    Html.program
        { init = init
        , view = view
        , update = update
        , subscriptions = \_ -> Sub.none
        }



-- MODEL


type alias ContentWithTraits =
    { someId : SomeId
    , traits : List TraitWithRelevance
    }


type alias MetaInfo =
    { name : String
    , imageUrl : String
    }


type alias Name =
    String


type alias SomeId =
    String


type alias Relevance =
    String


type alias TraitWithRelevance =
    ( Name, SomeId, Relevance )


type TraitToAdd
    = Nothing
    | TraitWithRelevance


type alias Model =
    { contentWithTraits : ContentWithTraits
    , metaInfo : MetaInfo
    , traitToAdd : TraitToAdd
    }


init : ( Model, Cmd Msg )
init =
    ( Model contentWithTraits { name = "content name", imageUrl = "http://weknowmemes.com/generator/uploads/generated/g1369409960206058073.jpg" } Nothing, Cmd.none )


contentWithTraits : ContentWithTraits
contentWithTraits =
    { someId = "some default id"
    , traits =
        [ ( "name for trait a", "a", "1" )
        , ( "this is the name for trait b", "b", "50" )
        ]
    }



-- UPDATE


type Msg
    = EditTrait SomeId Relevance
    | Reset


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        EditTrait someId relevance ->
            let
                _ =
                    Debug.log "model: " model
            in
                ( replaceTraits model <| List.map (updateTrait ( someId, relevance ))
                , Cmd.none
                )

        Reset ->
            -- ( replaceTraits model <| loadTraits model.contentWithTraits.someId, Cmd.none )
            {-
               NOTE: I'm stuck here...
               should make HTTP GET request, then replace the model.contentWithTraits.traits with the decoded JSON's traits field
            -}
            ( model, Cmd.none )


replaceTraits : Model -> (List TraitWithRelevance -> List TraitWithRelevance) -> Model
replaceTraits model func =
    { model
        | contentWithTraits =
            { someId = model.contentWithTraits.someId
            , traits = func model.contentWithTraits.traits
            }
    }


updateTrait : ( SomeId, Relevance ) -> TraitWithRelevance -> TraitWithRelevance
updateTrait updatedTrait originalTrait =
    let
        ( name, someId, _ ) =
            originalTrait

        ( someIdVerification, newValue ) =
            updatedTrait

        _ =
            Debug.log "updatedTrait: " updatedTrait
    in
        if someId == someIdVerification then
            ( name, someId, newValue )
        else
            originalTrait



-- VIEW


valueRange : String -> TraitWithRelevance -> Html Msg
valueRange typ trait =
    let
        ( name, someId, relevance ) =
            trait
    in
        input [ Attr.type_ typ, Attr.min <| toString 0, Attr.max <| toString 100, Attr.value relevance, Attr.step <| toString 1, onInput <| EditTrait someId ] []


traitView : TraitWithRelevance -> Html Msg
traitView trait =
    let
        ( name, someId, relevance ) =
            trait
    in
        div []
            [ text someId
            , valueRange "range" trait
            , valueRange "number" trait
            , text name
            ]


view : Model -> Html Msg
view model =
    div []
        [ text model.contentWithTraits.someId
        , img [ Attr.src model.metaInfo.imageUrl, Attr.width 300 ] []
        , ul [] (List.map traitView model.contentWithTraits.traits)
        , button [ onClick Reset ] [ text "Reset" ]
        ]

另外，尽管有很多行代码，但请注意，我在保持足够的上下文的同时，尽可能地消除了问题。

您需要一条返回数据的消息。假设它是一个简单的

Trait

s列表：

type Msg
    = EditTrait SomeId Relevance
    | Reset
    | OnFetchTraits (Result Http.Error (List Traits))

然后需要一个命令来发送请求，比如

fetchTraits : Cmd Msg
fetchTraits =
    Http.get "http://localhost:4000/traits" traitListDecoder
        |> Http.send OnFetchTraits

您需要实现

traitListDecoder

，将JSON解码到msg中返回的列表中

然后，您将返回

fetchTraits

，而不是在被卡住的

update

函数中返回

Cmd.none

。然后Elm将发出请求，您将得到一个

OnFetchTraits

msg，并将其传递到

update

。你需要一个单独的案例来处理这个问题。如果请求成功，您可以解压缩

结果

类型并提取数据；如果请求不成功，您可以处理错误。