F# Fable中使用tryFetch正确解包Promise并处理多URL请求错误的实现方法

我完全懂你的痛点——用Promise.Parallel处理批量请求时，只要有一个失败就直接全挂，根本没法处理部分成功的场景。咱们一步步把这个问题理顺，让每个请求都返回Result<TermData, exn>类型，这样哪怕部分请求失败，整个流程也能正常推进，你还能灵活处理成功/失败的结果。

第一步：正确使用tryFetch并包裹全流程结果 #

首先明确：tryFetch的签名是string -> RequestProperties list -> Promise<Result<Response, exn>>，它会把请求的成功/失败包装成Result类型，而不是直接reject Promise。咱们需要在promise计算表达式里用let!取出这个Result，同时还要注意JSON解析也可能失败，这一步也得捕获异常并转换成Result。

修改你的loadSingleSeries函数如下：

let loadSingleSeries (term: QueryTerm) = promise {
    let url = $"/api/plot/{term.Term}?allWords={term.AllWords}"
    // 获取请求的Result结果（请求失败不会中断流程）
    let! fetchResult = tryFetch url []
    match fetchResult with
    | Error fetchEx ->
        // 请求阶段失败，直接返回Error
        return Error fetchEx
    | Ok response ->
        // 请求成功后解析JSON，这一步可能抛出异常，用try...with捕获
        try
            let! termData = response.json<TermData>()
            return Ok termData
        with parseEx ->
            // JSON解析失败，返回对应的Error
            return Error parseEx
}

这段代码的核心逻辑：

• 用tryFetch替代fetch，拿到包装后的Result<Response, exn>
• 对请求失败的分支直接返回Error
• 对请求成功的分支，用try...with包裹JSON解析，把解析失败也转换成Error
• 最终函数返回Promise<Result<TermData, exn>>，每个请求不管成功失败都会给出明确结果

第二步：并行处理并分离成功/失败结果 #

现在loadSingleSeries返回的是带Result的Promise，Promise.Parallel执行后会得到Result<TermData, exn> array——这时候你就能自由处理成功和失败的情况，不会因为单个请求失败导致整个流程中断：

let processData () = 
    parsed // 假设这里是Dictionary<int, QueryTerm>
    |> Seq.map (fun kv -> loadSingleSeries kv.Value)
    |> Promise.Parallel
    |> Promise.map (fun allResults ->
        // 分离成功的数据和失败的错误信息
        let successfulData = allResults |> Array.choose (function Ok data -> Some data | Error _ -> None)
        let failedRequests = allResults |> Array.choose (function Error ex -> Some ex | Ok _ -> None)

        // 打印失败信息方便调试
        failedRequests |> Array.iter (fun ex -> 
            console.error($"请求失败: {ex.Message}")
        )

        // 用成功的数据更新UI（一次性绘制所有成功结果）
        console.log("成功获取的数据:", successfulData)
        // 这里可以把successfulData传递给你的UI绘制逻辑
        successfulData
    )

为什么你之前的代码编译失败？ #

你之前的尝试有两个关键问题：

1. tryFetch返回的是Promise<Result<Response, exn>>，你需要用let!取出内部的Result，而不是直接操作Promise对象本身
2. response.json<TermData>()返回的是Promise<TermData>，如果解析失败会reject这个Promise——你必须把这一步也用异常捕获包装成Result，否则即使请求成功，解析失败还是会导致整个Promise.reject，破坏你想要的容错逻辑

额外优化：自定义错误类型（可选） #

如果你想更精细地区分错误类型（比如请求失败、解析失败、无数据），可以定义一个联合类型：

type RequestError =
    | FetchFailure of exn
    | JsonParseFailure of exn
    | NoDataAvailable

// 修改loadSingleSeries的返回类型为Promise<Result<TermData, RequestError>>
let loadSingleSeries (term: QueryTerm) = promise {
    let url = $"/api/plot/{term.Term}?allWords={term.AllWords}"
    let! fetchResult = tryFetch url []
    match fetchResult with
    | Error ex ->
        return Error (FetchFailure ex)
    | Ok response ->
        try
            let! termData = response.json<TermData>()
            // 额外检查数据是否为空
            if termData.counts.Length = 0 then
                return Error NoDataAvailable
            else
                return Ok termData
        with ex ->
            return Error (JsonParseFailure ex)
}

这样后续处理失败原因时会更清晰。

内容的提问来源于stack exchange，提问作者Underscore