JS新手开发应用：Fetch响应无法稳定存入sessionStorage求助

我是JavaScript新手，正在开发第一个大型应用。尝试将Firebase Storage中存储的图片URL通过后端接口获取后存入前端的sessionStorage，但该操作并非每次都成功，表现为随机生效且无规律可循。已通过Postman测试后端接口，响应结果始终符合预期，问题出在JavaScript前端代码层面。

前端代码如下：

document.querySelector('#fileUpload').addEventListener('change', event => {
  handleImageUpload(event)
})


const handleImageUpload = event => {
  const files = event.target.files
  const formData = new FormData()
  formData.append('file', files[0])

  fetch('http://localhost:8080/profile/pic/', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(resp => sessionStorage.setItem('image_path', JSON.stringify(resp.response)))
}

后端响应格式：包含response字段，值为Firebase Storage的图片URL

• 未处理请求错误与异常响应：你的代码只处理了请求成功进入then的场景，但fetch请求在网络故障、后端返回非2xx状态码（如500、400）时不会自动抛出错误，会直接进入下一个then，此时resp可能不是预期格式，导致存储sessionStorage失败。
  修复代码：

  fetch('http://localhost:8080/profile/pic/', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    // 先检查响应状态是否正常
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    return response.json();
  })
  .then(resp => {
    // 确保响应字段存在再存储
    if (resp && resp.response) {
      sessionStorage.setItem('image_path', JSON.stringify(resp.response));
    } else {
      console.error('响应格式不符合预期:', resp);
    }
  })
  .catch(err => {
    // 捕获所有请求或处理环节的错误
    console.error('上传或请求出错:', err);
  })
  

• 并发上传导致的竞争问题：如果用户快速多次选择文件，会触发多个并行的fetch请求，后完成的请求可能覆盖先完成的结果，或是某个请求因并发限制失败。
  修复方法：添加上传状态锁，避免重复触发：

  let isUploading = false; // 新增锁变量
  
  const handleImageUpload = event => {
    if (isUploading) return; // 正在上传时直接返回
    isUploading = true;
  
    const files = event.target.files
    if (!files || files.length === 0) {
      isUploading = false;
      return;
    }
    const formData = new FormData()
    formData.append('file', files[0])
  
    fetch('http://localhost:8080/profile/pic/', {
      method: 'POST',
      body: formData
    })
    .then(response => {
      if (!response.ok) throw new Error(`状态码：${response.status}`);
      return response.json();
    })
    .then(resp => {
      if (resp?.response) {
        sessionStorage.setItem('image_path', JSON.stringify(resp.response));
      }
    })
    .catch(err => console.error('出错:', err))
    .finally(() => {
      isUploading = false; // 无论成败都解锁
    })
  }
  

• 文件对象获取异常：某些场景下（比如快速操作文件选择器），event.target.files可能未正确获取到文件对象，导致formData为空，后端返回异常结果。
  修复方法：先校验文件存在性，再复制文件对象确保可靠：

  const files = Array.from(event.target.files); // 转为数组避免原对象异常
  if (files.length === 0) return;
  const formData = new FormData()
  formData.append('file', files[0])
  

• 浏览器缓存或跨域边缘问题：浏览器可能对请求做缓存，或是部分浏览器对跨域请求的处理存在差异，导致响应不符合预期。
  修复方法：添加缓存控制头，并确认后端CORS配置完整：

  fetch('http://localhost:8080/profile/pic/', {
    method: 'POST',
    body: formData,
    headers: {
      'Cache-Control': 'no-cache' // 强制不使用缓存
    }
  })
  

  同时确认后端已配置允许前端域名的CORS规则，包括OPTIONS预检请求。

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