如何访问Fable的promise结果

Question

只是从寓言/ Elmish / F#开始，但在完成一个基本概念时被卡住了……

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

我原以为网页(localhost)会输出一个文本字符串，其中包含GET请求的响应，但我在网页上只得到了"object Promise“。但是，GET请求的所需响应将记录在浏览器控制台上。如果我使用promise主体中的txt (在return之前)发出printfn命令，我还可以在浏览器控制台中看到GET请求的结果。

因此:我不知道如何访问promise的结果。请帮帮忙，我错过了什么？在来自Fable的示例应用程序中，创建了一个图像“容器”，并根据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

Promise是一种基本的命令式构造--您只能使用副作用从它们中获得价值。它们与C#中的任务不同，后者也可以同步生成值。这意味着您的模型必须有两个与getMe相关的状态:等待getMe完成时所处的状态和getMe完成时所处的状态。每个状态在更新时都有自己的消息和案例。第一种情况的处理程序将使用Cmd.ofSub开始getMe，并将确保当promise完成时，它具有发送第二条消息的副作用，该消息将在UI中显示promise的结果。

因此，除了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

Answer 2

如果您遵循elmish模式，则可以执行以下操作。这可能会产生一些错误，但应该足以让您继续：

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

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

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

type Model = {
    UserMessage: string
    ErrorMessage: string
}

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

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

您的init现在应该返回model和Cmd，因为签名已经更改(参见下面的更新)：

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

更改您的更新函数，签名现在已更改，因为我们使用的是mkProgram。请注意，当您调用Cmd.ofPromise时，如果您的promise代码中发生了任何不好的事情，则将ShowResponse和错误消息作为成功和错误的-ShowResponse回调传递。

//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