การดาวน์โหลดหน้าเว็บ

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 หากล้มเหลว คุณจะใช้ pattern matching เพื่อจับผลลัพธ์เหล่านี้และอัพเดทโมเดลและมุมมองของคุณตามนั้น

ดูเพิ่มเติม