Question

只是从寓言/ Elmish / F＃开始，却陷入了完成基本概念的过程...

代码的目标是执行一个简单的HTTP GET请求，然后将GET请求的结果发布到网页上的用户。想法是使用寓言Promise或async执行GET请求并返回结果，然后可以使用Elmish和Fable在网页上显示结果。

我希望网页（本地主机）将输出一个文本字符串，其中包含GET请求的响应，而我在网页上只得到了“ [object Promise]”。但是，GET请求的所需响应会记录在浏览器控制台上。如果我在promise的主体中（在txt之前）发出带有return的printfn命令，我也可以在浏览器控制台中看到GET请求的结果。

因此：我不知道如何获得承诺的结果。请帮忙，我想念什么？ [Fable] [1]中的示例应用程序中，创建了一个图像“容器”，并根据HTTP get的结果放置了一个图像，但是我需要使用文本（json字符串）。

这是我的代码：

module App

open Elmish
open Fable.React
open Elmish.React
open Fable.React.Props
open Fable.Import
open Fable.PowerPack

open Fetch

// CallAPI
let getMe = promise { 
                    let! res = fetch "https://reqres.in/api/users/2" [] 
                    let! txt = res.text()              
                    // Access your resource here
                    Browser.console.log txt 
                    return txt
                    }

//State
type MyInputString = 
     {Response : string}


// Message
type Message = 
           |ShowResponse
           |Error

let getFromAPI  = 
     getMe |> sprintf "%A" 


//Update
let update msg model = 
           match msg with 
           |ShowResponse -> {Response = getFromAPI }
           |Error -> {Response = "Errrrrr"}


//Helper function
let text(content:string) : ReactElement = unbox content
//Helper function
let init() = {Response = ""}


//View
let view model dispatch = 
    div
     []
      [
          div [] [ input[ Type "text"] ]
          button [ OnClick (fun _ -> dispatch ShowResponse ) ] [ text "Show Me"]
          div [] []
          div [] [text (model.Response)]
      ]

Program.mkSimple init update view
|> Program.withReactSynchronous "werk"
|> Program.withConsoleTrace
|> Program.run ```




  [1]: https://fable.io

Answer 1

如果按照Elmish模式进行操作，则可以执行以下操作。这可能会产生一些错误，但足以使您继续前进：

使用mkProgram，因为它使您可以灵活地指定Cmd回调

Program.mkProgram init update view
    |> Program.withReact "elmish-app"
    |> Program.withConsoleTrace
    |> Program.run

确保模型和消息之间有区别

type Model = {
    UserMessage: string
    ErrorMessage: string
}

添加消息类型以接收承诺结果并处理错误：

type Message = 
        | Loading
        | ShowResponse of Result<string,string>
        | Error of exn

当签名更改时，您的init应该立即返回模型和Cmd（请参见下面的更新）：

let init() = { UserMessage= "" ; ErrorMessage= "" } , Cmd.ofMsg Loading

更改您的更新功能，现在我们使用mkProgram时，签名也已更改。请注意，当您调用Cmd.ofPromise时，会将ShowResponse和Error消息作为成功的回调传递给ShowResponse -ShowResponse，如果诺言代码中发生任何错误，则返回Error。

//update signature has changed from
msg -> model -> model
//to:
msg -> model -> (model*Cmd<msg>)

let update msg model = 
            match msg with 
            | Loading -> 
                { model with UserMessage= "Loading" }, 

                    Cmd.ofPromise (getMe ) () ShowResponse Error
            | ShowResponse  resp -> 
                match resp with
                    | Ok str -> 
                        { model with UserMessage = str }, Cmd.none
                    | Error str -> 
                        { model with ErrorMessage = str }, Cmd.none                     
            | Error exn ->  { model with ErrorMessage = string exn }, Cmd.none

Answer 2

承诺是从根本上必须执行的构造-您只能使用副作用才能从中获得价值。它们不像C＃中的Task，它也可以同步产生一个值。这意味着您的模型必须具有与getMe相关的两个状态：等待getMe完成时所处的状态，以及getMe完成时所处的状态。每个州在更新时都会有自己的消息和案例。第一种情况的处理程序将使用Cmd.ofSub开始getMe，并确保当诺言完成时，它具有发送第二条消息的副作用，该消息将在UI中显示诺言的结果。

因此，除了ShowResponse和Error，还需要第三条消息MakeRequest。下面的代码只是一个草图（未经测试），但说明了这一点：

// Message
type Message = 
  | MakeRequest
  | ShowResponse of string
  | Error

let getMe dispatch = 
   promise { 
     let! res = fetch "https://reqres.in/api/users/2" [] 
     let! txt = res.text()              
     // Access your resource here
     Browser.console.log txt 
     dispatch (ShowResponse txt)
   }

//Update
let update msg model = 
  match msg with 
  | MakeRequest -> { model with Response = "Wait..." }, 
                     Cmd.ofSub(fun dispatch -> getMe dispatch |> Promise.start)
  | ShowResponse msg -> { model with Response = msg }, Cmd.empty
  | Error -> { model with Response = "Errrrrr"}, Cmd.empty

如何获取寓言的承诺结果

2 个答案: