Книги
Elm
Глава 11. HTML и веб
Загрузка веб-страницы

Elm:
Загрузка веб-страницы

Как это сделать:

Elm требует, чтобы побочные эффекты, такие как HTTP-запросы, структурировались как команды. Вы будете использовать модуль Http для получения данных и обработки ответа.


module Main exposing (main)

import Browser
import Html exposing (Html, text)
import Http

type alias Model =
    { content : String }

type Msg
    = GotText (Result Http.Error String)

init : ( Model, Cmd Msg )
init =
    ( Model ""
    , fetchPage "https://api.example.com/data"
    )

fetchPage : String -> Cmd Msg
fetchPage url =
    Http.get { url = url, expect = Http.expectString GotText }

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        GotText (Ok data) ->
            ( { model | content = data }, Cmd.none )

        GotText (Err _) ->
            ( { model | content = "Ошибка: Не удалось загрузить страницу." }, Cmd.none )

view : Model -> Html Msg
view model =
    text model.content

main : Program () Model Msg
main =
    Browser.sandbox { init = init, update = update, view = view }

При успешной загрузке content в вашей модели будет содержать содержимое страницы. В случае ошибки он будет содержать простое сообщение об ошибке.

Подробнее

Elm рассматривает побочные эффекты как Данные, что означает, что HTTP-запросы управляются средой выполнения Elm, а не напрямую в вашем коде. Исторически это отличалось от языков, таких как JavaScript, где побочные эффекты более свободны. Альтернативы в других языках могли бы быть fetch в JavaScript или requests в Python. Подход Elm обеспечивает предсказуемость и удобство обслуживания вашего приложения, кодируя побочные эффекты в типы и используя централизованную функцию update для управления изменениями.

Модуль Http не всегда существовал в Elm. Ранние версии создавали свой собственный AJAX, что было неудобно. Теперь Http предоставляет набор функций для обработки различных случаев, таких как ожидание JSON или строк, что делает его более удобным для пользователя.

С точки зрения реализации, когда вы вызываете fetchPage, Elm отправляет сообщение в вашу функцию update с результатом. Это будет либо Ok data, если операция выполнена успешно, либо Err error, если произошла ошибка. Вы используете сопоставление по образцу для этих исходов и соответственно обновляете вашу Model и представление.

См. также

Разбор HTML