如何用JavaScript Fetch处理ASP.NET Web API的Blob/JSON返回结果

我来帮你搞定这个fetch的逻辑，刚好适配你说的ASP.NET Web API那种成功返回Blob、失败返回错误JSON的场景。你原来的代码思路是对的，但还需要补全错误分支的处理，还要注意fetch的一个坑——它不会因为HTTP错误状态码（比如400、500）就触发catch，必须咱们手动判断。

给你补全后的完整代码：

fetch('flowers.jpg')
  .then(function(response) {
    // 先判断请求是否成功（HTTP状态码2xx）
    if (response.ok) {
      // 成功的话，解析成Blob
      return response.blob();
    } else {
      // 失败的话，解析返回的错误JSON
      return response.json().then(errorData => {
        // 把错误信息抛出去，让后面的catch统一处理
        throw new Error(errorData.message || '请求失败，请稍后重试');
      });
    }
  })
  .then(function(blob) {
    // 拿到Blob后的处理，比如下载或者显示图片
    // 举个下载文件的例子：
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'flowers.jpg';
    document.body.appendChild(a);
    a.click();
    // 用完临时URL记得释放资源，避免内存泄漏
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
  })
  .catch(function(error) {
    // 这里处理所有错误：网络错误、API返回的业务错误
    console.error('请求出错:', error.message);
    // 也可以给用户直观提示，比如alert(error.message)
  });

关键点说明： #

• 必须判断response.ok：这是fetch的特殊点！它只有在完全连不上服务器（比如断网）的时候才会进入catch，像400、500这种HTTP错误，它依然会走到then分支，所以得手动检查状态码是否在200-299区间。
• 错误分支解析JSON：ASP.NET Web API返回错误时，会把业务错误信息放在JSON里，我们先调用response.json()解析，再把错误信息包装成Error对象抛出去，这样就能在catch里统一处理所有错误类型了。
• Blob的资源释放：用URL.createObjectURL生成的临时URL会占用内存，用完一定要用revokeObjectURL释放，避免内存泄漏。

如果你的API返回的错误JSON结构不一样（比如错误信息在errorMsg字段而不是message），只需要把errorData.message改成对应的字段就行。

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