React上传图片调用fetch接口时如何正确显示请求pending状态加载器

问题原因 #

你的加载提示逻辑存在以下几个明显问题：

• 加载状态开启时机错误：你是在请求成功的then回调中才把spinner设为true，此时请求已经完成，根本不会在请求pending阶段展示加载提示
• 没有关闭加载状态的逻辑：请求完成后你始终没有把spinner改回false，所以加载提示一旦显示就会永远存在
• fetch语法存在书写错误：fetch('my/API/Endpoint'), { 这里多了一个右括号，会导致请求配置不生效

修复方案 #

调整状态变更时机：发起请求前就开启加载状态，请求不管成功/失败都要关闭加载状态，同时修正语法错误，修正后的代码如下：

import { useState } from 'react';

export default function ImageUpload() {
  const [spinner, setSpinner] = useState(false);
  // 注：你原本缺失文件选择的处理逻辑，这里补充基础实现，如果你已有相关逻辑可以忽略
  const [file, setFile] = useState(null);

  function upload(){
    // 发起请求前开启加载状态
    setSpinner(true);
    // 构造请求体，如果你已有相关逻辑可以调整
    const body = new FormData();
    if (file) body.append('image', file);

    // 修正fetch的语法错误
    fetch('my/API/Endpoint', {
      method: 'post',
      body: body,
    })
    .then(function(data){
      // 这里写你请求成功后的业务逻辑
      console.log('上传成功', data);
    })
    .catch(function(err){
      // 这里写请求失败后的处理逻辑
      console.error('上传失败', err);
    })
    .finally(function(){
      // 无论请求成功还是失败，都关闭加载状态
      setSpinner(false);
    })
  }

  return (
    <>
      {/* 补充文件选择的处理逻辑 */}
      <input type="file" onChange={(e) => setFile(e.target.files[0])}/>
      <input type="button" value="上传图片" onClick={upload}/>
      {spinner && (
        <p>something is loading</p>
      )}
    </>
  );   
}

补充说明 #

如果你的项目环境支持async/await语法，也可以改成更易读的异步写法，状态控制逻辑是一致的：

async function upload(){
  setSpinner(true);
  try {
    const body = new FormData();
    if (file) body.append('image', file);
    const res = await fetch('my/API/Endpoint', {
      method: 'post',
      body: body,
    });
    // 业务逻辑处理
  } catch (err) {
    // 错误处理
  } finally {
    setSpinner(false);
  }
}

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