避免在榆树中遇到Http Race Condition

Question

假设我们有一个文本输入字段,并且在其内容的每次更改时,我们向搜索API发送Http请求.现在,我们无法保证Http响应按照我们发送请求的顺序返回elm.

最简单的方法是确保我们对与最新请求相对应的响应做出反应- 而不是最新的响应,这可能对应于过时的搜索字符串？是否有一种简单的方法将查询字符串附加到Elm的http效果返回的消息中？或者我们可以将响应链接到触发请求的任何其他方式？

如果可能的话,我想避免将查询包含在搜索API的响应中.另一个补救措施是去除搜索,但这只会降低使用错误响应的可能性,而我们想要消除它.

谢谢你的帮助!

例:

import Html
import Html exposing (..)
import Html.Events exposing (onClick, onInput)
import Http
import Json.Decode as Decode


main = Html.program
        { init = ( { searchText = "", result = "" }, Cmd.none )
        , update = update
        , subscriptions = (\model -> Sub.none)
        , view = view
        }


type alias Model =
    { searchText : String
    , result: SearchResult  
    }


type alias SearchResult = String


type Msg 
    = NewSearchText String
    | ReceivedResponse (Result Http.Error SearchResult)


update msg model = 
    case msg of 

        NewSearchText newText ->
            ( { model | searchText = newText}
            , getSearchResult newText
            )

        ReceivedResponse (Result.Ok response) ->
            ( { model | result = response }
            , Cmd.none
            ) 

        ReceivedResponse (Result.Err error) ->
            Debug.crash <| (toString error)



getSearchResult : String -> Cmd Msg
getSearchResult query =
    let 
        url = "http://thebackend.com/search?query=" ++ query

        request : Http.Request SearchResult  
        request = Http.get url Decode.string
    in
        Http.send ReceivedResponse request            


view model =
    div [] 
        [ Html.input [onInput (\text -> NewSearchText text)] []
        , Html.text model.result
        ]

Answer 1

是的,可以将查询字符串附加到响应.首先,扩充您的消息类型以处理其他数据:

type Msg 
  = NewSearchText String
  | ReceivedResponse String (Result Http.Error SearchResult)

然后,更改您的Http.send调用以将查询文本附加到ReceivedResponse消息:

Http.send (ReceivedResponse query) request

最后,在您update的模式匹配中获取结果Msg:

case msg of
  ReceivedResponse query (Ok response) ->
    ...
  ReceivedResponse query (Err err) ->
    ...

为什么这样做？

该Http.send函数的第一个参数可以是消耗任意函数Result Http.Error SearchResult,并把它变成一个Msg.在您的原始代码中,该函数只是ReceivedResponseMsg构造函数.当更新Msg类型以便ReceivedResponse接受两个参数时,ReceivedResponse构造函数变为一个curried双参数函数,并且ReceivedResponse "some query here"是一个单参数函数,它接受a Result并返回a Msg.

Answer 2

这是一种方式:

在模型中添加两​​个整数:

1. requestsSent : Int - 提出的请求数量.
2. lastReceived : Int - 您处理的最新请求.

修改ReceivedResponse为将Int作为第一个值:

| ReceivedResponse Int (Result Http.Error SearchResult)

现在,无论何时发出请求,requestsSent在模型中递增1并通过部分应用"标记"请求ReceivedResponse:

Http.send (ReceivedResponse model.requestsSent) request

在您的update函数中,检查Intin中ReceivedResponse是否大于lastReceived.如果是,则处理它,并将该值设置lastReceived为此响应的Int.如果不是,请丢弃它,因为您已经处理了较新的请求.