JavaScript使用fetch请求时如何按错误类型展示不同报错信息

现有实现的合理性 #

你的实现整体是可行的，已经覆盖了核心需求：

• 正确识别fetch网络错误（这类错误默认抛出TypeError，你通过error.name判断的逻辑是对的），返回自定义提示
• 主动校验HTTP响应状态，状态异常时抛出业务错误展示对应提示
• 所有异常分支都重置了预测结果状态，避免旧数据残留

现有实现的可优化点 #

目前的实现还存在几个不足：

• HTTP异常错误提示太固定：不管是400参数错误、401无权限、500服务端异常，全部抛出Invalid date，会对用户造成误导
• 未覆盖JSON解析异常场景：如果接口返回非JSON格式的响应，res.json()会抛出SyntaxError，现有逻辑会直接把原生错误信息（比如Unexpected token < in JSON at position 0）暴露给用户，用户无法理解
• 缺少错误类型校验：如果catch捕获到的不是Error实例（比如业务代码抛出字符串/数字等非标准值），直接访问error.name/error.message会触发二次报错
• 细节问题：自定义提示中的sever为拼写错误，正确应为server；请求成功时没有清空上一次的错误提示，可能导致错误一直展示

优化方案 #

优化后的代码如下：

try {
    const res = await fetch(`http://localhost:8000/api/prediction/${model.ticker}/?` + new URLSearchParams({
        pred_date: predictionDate,
    }))

    if (!res.ok) {
        // 可根据不同状态码返回对应提示，也可扩展读取后端返回的自定义错误信息
        let errMsg = '请求失败'
        switch(res.status) {
            case 400:
                errMsg = '请求参数错误，请检查日期格式'
                break
            case 401:
                errMsg = '未授权，请先登录'
                break
            case 403:
                errMsg = '无权限访问该资源'
                break
            case 404:
                errMsg = '请求的资源不存在'
                break
            case 500:
            case 502:
            case 503:
                errMsg = '服务器异常，请稍后重试'
                break
        }
        throw new Error(errMsg)
    }

    const predictionValue = await res.json()
    setPredictionValue(predictionValue)
    setError(null) // 成功时清空历史错误
} catch (error) {
    let errMsg = '未知错误，请稍后重试'
    // 先校验错误类型，避免非Error实例导致的报错
    if (error instanceof Error) {
        if (error.name === 'TypeError' && error.message.includes('Failed to fetch')) {
            errMsg = '无法连接到服务器，请检查网络后重试'
        } else if (error.name === 'SyntaxError' && error.message.includes('JSON')) {
            errMsg = '服务器返回数据格式错误，请稍后重试'
        } else {
            errMsg = error.message
        }
    }
    setError(errMsg)
    setPredictionValue(null)
}

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