Spring Boot从外部API异步获取数据 实现无阻塞UI更新咨询

前端React实现 #

核心是发起请求时保持UI可交互，同时给用户加载反馈，请求完成后再更新数据。

• 用useState管理数据、加载状态和错误信息
• 用useEffect触发异步请求，结合async/await处理非阻塞逻辑
• 请求过程中展示加载提示，避免用户误以为页面卡顿

示例代码：

import { useState, useEffect } from 'react';

function DataDisplay() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      setError(null);
      try {
        const response = await fetch('/api/external-data');
        if (!response.ok) throw new Error('请求失败');
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  if (isLoading) return <div>数据加载中...</div>;
  if (error) return <div>出错了：{error}</div>;
  if (!data) return null;

  return (
    <div>
      <h3>返回数据</h3>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataDisplay;

async/await不会阻塞浏览器主线程，用户可以正常操作页面，同时通过isLoading状态明确告知当前状态。

后端Spring Boot优化 #

避免后端线程被慢API占用，用异步处理让线程可以承接其他请求，等外部API返回后再响应前端。

方式1：@Async异步方法 #

1. 启动类加@EnableAsync开启异步支持
2. 业务层方法标记@Async，返回CompletableFuture

示例代码：

// 启动类
@SpringBootApplication
@EnableAsync
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

// 业务层
@Service
public class ExternalApiService {
    @Async
    public CompletableFuture<Map<String, Object>> fetchExternalData() {
        RestTemplate restTemplate = new RestTemplate();
        Map<String, Object> result = restTemplate.getForObject("https://slow-api.example.com/data", Map.class);
        return CompletableFuture.completedFuture(result);
    }
}

// 控制器
@RestController
@RequestMapping("/api")
public class DataController {
    @Autowired
    private ExternalApiService apiService;

    @GetMapping("/external-data")
    public CompletableFuture<Map<String, Object>> getExternalData() {
        return apiService.fetchExternalData();
    }
}

方式2：DeferredResult手动控制响应 #

适合需要更灵活异步逻辑的场景：

@GetMapping("/external-data")
public DeferredResult<Map<String, Object>> getExternalData() {
    DeferredResult<Map<String, Object>> deferredResult = new DeferredResult<>();
    
    new Thread(() -> {
        try {
            RestTemplate restTemplate = new RestTemplate();
            Map<String, Object> result = restTemplate.getForObject("https://slow-api.example.com/data", Map.class);
            deferredResult.setResult(result);
        } catch (Exception e) {
            deferredResult.setErrorResult("请求失败：" + e.getMessage());
        }
    }).start();
    
    return deferredResult;
}

这种方式下，后端线程会在返回DeferredResult后立即释放，不会被慢API阻塞。

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