JSON

我们刚刚看到一个使用 HTTP 获取书籍内容的示例。很好，但大量服务器都以一种特殊格式返回数据，它称为 JavaScript 对象表示法，简称 JSON。

因此，我们的下一个示例演示如何获取一些 JSON 数据，使我们能够按一个按钮来显示从随意挑选的书籍中摘取的随机引文。单击蓝色的“编辑”按钮，仔细浏览一下该程序。也许你读过其中一些书？立即单击蓝色按钮！

import Browser
import Html exposing (..)
import Html.Attributes exposing (style)
import Html.Events exposing (..)
import Http
import Json.Decode exposing (Decoder, map4, field, int, string)



-- MAIN


main =
  Browser.element
    { init = init
    , update = update
    , subscriptions = subscriptions
    , view = view
    }



-- MODEL


type Model
  = Failure
  | Loading
  | Success Quote


type alias Quote =
  { quote : String
  , source : String
  , author : String
  , year : Int
  }


init : () -> (Model, Cmd Msg)
init _ =
  (Loading, getRandomQuote)



-- UPDATE


type Msg
  = MorePlease
  | GotQuote (Result Http.Error Quote)


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    MorePlease ->
      (Loading, getRandomQuote)

    GotQuote result ->
      case result of
        Ok quote ->
          (Success quote, Cmd.none)

        Err _ ->
          (Failure, Cmd.none)



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.none



-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ h2 [] [ text "Random Quotes" ]
    , viewQuote model
    ]


viewQuote : Model -> Html Msg
viewQuote model =
  case model of
    Failure ->
      div []
        [ text "I could not load a random quote for some reason. "
        , button [ onClick MorePlease ] [ text "Try Again!" ]
        ]

    Loading ->
      text "Loading..."

    Success quote ->
      div []
        [ button [ onClick MorePlease, style "display" "block" ] [ text "More Please!" ]
        , blockquote [] [ text quote.quote ]
        , p [ style "text-align" "right" ]
            [ text "— "
            , cite [] [ text quote.source ]
            , text (" by " ++ quote.author ++ " (" ++ String.fromInt quote.year ++ ")")
            ]
        ]



-- HTTP


getRandomQuote : Cmd Msg
getRandomQuote =
  Http.get
    { url = "https://elm-lang.org/api/random-quotes"
    , expect = Http.expectJson GotQuote quoteDecoder
    }


quoteDecoder : Decoder Quote
quoteDecoder =
  map4 Quote
    (field "quote" string)
    (field "source" string)
    (field "author" string)
    (field "year" int)

这个示例与上一个示例非常相似

init 使用Loading状态让我们开始，并使用一条命令获取一个随机引文。
update处理GotQuote 消息，用于在出现新引文时处理。不管那里发生什么事，我们都没有任何其他命令。当有人按按钮时，它还处理MorePlease 消息，发出获取更多随机引文的命令。
view 向你展示这些引文！

主要区别在于getRandomCatGif 定义。我们已从使用Http.expectString切换到Http.expectJson。这是怎么回事？

JSON

当你向/api/random-quotes索取随机引文时，服务器会生成如下所示的 JSON 字符串

{
  "quote": "December used to be a month but it is now a year",
  "source": "Letters from a Stoic",
  "author": "Seneca",
  "year": 54
}

这里的信息没有任何保证。服务器可以更改字段的名称，并且字段在不同情况下可能具有不同的类型。这真是一个疯狂的世界！

在 JavaScript 中，该方法只是将 JSON 转换为 JavaScript 对象，并且希望没有任何问题发生。但是，如果出现一些错别字或意外的数据，你将会在代码的某个地方得到一个运行时异常。代码出错了？还是数据出错了？现在开始深入挖掘以找出答案吧！

在 Elm 中，我们会在 JSON 进入程序之前对其进行验证。因此，如果数据结构出乎意料，我们将立即发现。不良数据不会偷偷溜进来，并且导致三个文件外的运行时异常。这是通过 JSON 解码器实现的。

JSON 解码器

假设我们有一些 JSON

{
    "name": "Tom",
    "age": 42
}

我们需要使用 Decoder 运行它来访问特定信息。所以如果我们想要获得 "age"，将通过 Decoder Int 运行 JSON，它准确地描述如何访问该信息

如果一切顺利，我们将在另一端获得一个 Int！并且如果我们想要 "name"，将通过 Decoder String 运行 JSON，它准确地描述如何访问它

如果一切顺利，我们将在另一端获得一个 String！

那么，我们如何创建这样的解码器呢？

构建块

elm/json 包为我们提供了 Json.Decode 模块。其中包含我们所能组合的微小解码器。

因此，要从 { "name": "Tom", "age": 42 } 获取 "age"，我们将创建一个像这样的解码器

import Json.Decode exposing (Decoder, field, int)

ageDecoder : Decoder Int
ageDecoder =
  field "age" int

 -- int : Decoder Int
 -- field : String -> Decoder a -> Decoder a

field 函数有两个参数

String — 一个字段名称。因此，我们要求一个带有 "age" 字段的对象。
Decoder a — 下一个要尝试的解码器。所以如果 "age" 字段存在，我们将在此值上尝试该解码器。

因此，综合起来，field "age" int 要求一个 "age" 字段，如果它存在，则运行 Decoder Int 以尝试提取一个整数。

我们执行几乎完全相同的事情来提取 "name" 字段

import Json.Decode exposing (Decoder, field, string)

nameDecoder : Decoder String
nameDecoder =
  field "name" string

-- string : Decoder String

在这种情况下，我们要求一个带有 "name" 字段的对象，如果它存在，我们希望那里的值是一个 String。

组合解码器

但如果我们想要解码两个字段呢？我们使用 map2 将解码器组合在一起

map2 : (a -> b -> value) -> Decoder a -> Decoder b -> Decoder value

此函数采用两个解码器。它尝试两者并组合它们的结果。现在，我们可以把两个不同的解码器组合在一起了

import Json.Decode exposing (Decoder, map2, field, string, int)

type alias Person =
  { name : String
  , age : Int
  }

personDecoder : Decoder Person
personDecoder =
  map2 Person
      (field "name" string)
      (field "age" int)

因此，如果我们在 { "name": "Tom", "age": 42 } 中使用 personDecoder，我们将得到一个像 Person "Tom" 42 这样的 Elm 值。

如果我们真的想要融入解码器的精神，我们将使用我们以前的定义将 personDecoder 定义为 map2 Person nameDecoder ageDecoder。你总是希望从更小的构建块构建解码器！

嵌套解码器

许多 JSON 数据不是那么好和扁平。假设 /api/random-quotes/v2 使用关于作者更丰富的信息发布了

{
  "quote": "December used to be a month but it is now a year",
  "source": "Letters from a Stoic",
  "author":
  {
    "name": "Seneca",
    "age": 68,
    "origin": "Cordoba"
  },
  "year": 54
}

我们可以通过嵌套良好的解码器来处理此新场景

import Json.Decode exposing (Decoder, map2, map4, field, int, string)

type alias Quote =
  { quote : String
  , source : String
  , author : Person
  , year : Int
  }

quoteDecoder : Decoder Quote
quoteDecoder =
  map4 Quote
    (field "quote" string)
    (field "source" string)
    (field "author" personDecoder)
    (field "year" int)

type alias Person =
  { name : String
  , age : Int
  }

personDecoder : Decoder Person
personDecoder =
  map2 Person
    (field "name" string)
    (field "age" int)

请注意，我们不 bothers 对作者的 "origin" 字段进行解码。解码器可以跳过字段，在从非常大的 JSON 值中提取少量信息时，这个功能非常有用。

后续步骤

在 Json.Decode 中有很多我们在此未涉及的重要功能

bool : Decoder Bool
list : Decoder a -> Decoder (List a)
dict : Decoder a -> Decoder (Dict String a)
oneOf : List (Decoder a) -> Decoder a

因此，有很多方法来提取各种数据结构。对于混乱的 JSON，oneOf 函数特别有用。（例如，有时你会得到一个 Int，有时你会得到一个包含数字的 String。真讨厌！）

我们看到了 map2 和 map4，用于处理具有多个字段的对象。但当你开始处理越来越大的 JSON 对象时，值得查看一下 NoRedInk/elm-json-decode-pipeline。那里的类型有点花哨，但有些人发现它们更容易阅读和使用。

趣闻：我听说过很多关于人们发现其服务器代码在从 JS 切换到 Elm 时存在漏洞的故事。人们编写的解码器最终作为验证阶段进行工作，捕获 JSON 值中的奇怪内容。因此，当 NoRedInk 从 React 切换到 Elm 时，揭示了其 Ruby 代码中存在的几个漏洞！

JSON

JSON

JSON

JSON 解码器

构建块

组合解码器

嵌套解码器

后续步骤

结果与“”匹配

没有与“”匹配的结果