如何条件处理fetch响应：避免JSON生成无效Zip并存储JSON数据

你可以通过先判断响应的Content-Type或者尝试先解析JSON、失败后再处理Blob的方式，区分返回的是JSON错误信息还是Zip文件，避免生成损坏的文件。

方法一：通过Content-Type头判断 #

先读取响应的Content-Type，如果是JSON类型则解析JSON，否则处理Zip文件：

await fetch(params)
  .then(async res => {
    const contentType = res.headers.get('Content-Type');
    if (contentType?.includes('application/json')) {
      // 解析JSON错误信息并存储到变量
      const errorData = await res.json();
      console.log('错误信息:', errorData);
      // 这里可根据业务逻辑处理errorData，比如弹窗提示用户
      return;
    }
    // 非JSON类型则处理Zip文件
    const blob = await res.blob();
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${name}.zip`;
    document.body.appendChild(a);
    a.click();
    a.remove();
    window.URL.revokeObjectURL(url); // 释放URL对象，避免内存泄漏
  })
  .catch(err => console.error(err));

方法二：尝试解析JSON，失败则处理Blob #

如果后端返回的Content-Type可能不准确，用这种容错性更强的方式：先尝试解析JSON，失败后再转Blob处理：

await fetch(params)
  .then(async res => {
    try {
      // 先尝试解析JSON
      const errorData = await res.json();
      console.log('错误信息:', errorData);
      // 将errorData存储到变量，供后续业务逻辑使用
      return;
    } catch (e) {
      // 解析JSON失败，说明是Zip文件
      const blob = await res.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `${name}.zip`;
      document.body.appendChild(a);
      a.click();
      a.remove();
      window.URL.revokeObjectURL(url);
    }
  })
  .catch(err => console.error(err));

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