如何正确处理对同一端点的多个请求，而不让它们在 React 中乱序返回？

Question

我有一个组件可以处理来自后端的数据请求。该请求基于用户在 UI 中单击的内容，有时该请求会返回一堆数据，有时则不会。

我们发现一个问题，用户会点击一个大请求，然后立即点击一个小请求。问题是小请求在大请求之前返回，然后大请求返回并覆盖用户最后一个较小的请求。

function handleRequest() {
  useEffect(() => {
     getTableData();
  }, [mainContext?.tableFilterContext])

  async function getTableData() {
    mainContext?.setTableData({
      ...mainContext?.tableData,
      tableLoading: true
    })
    
    let data = await handleTableDataRequest(mainContext?.tableFilterContext);

    mainContext?.setTableData({
      tableData: data,
      tableLoading: false
    })
  }
}

如何确保加载到

mainContext?.tableData

中的数据始终是用户最后请求的数据？

Answer 1

import { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetchData().then((result) => {
      setData(result);
    }).catch((error) => {
      console.error('Request failed', error);
    });
  }, []);

  async function fetchData() {
    try {
      // Make multiple requests concurrently
      const [data1, data2, data3] = await Promise.all([
        fetch('https://api.example.com/data1').then(response => response.json()),
        fetch('https://api.example.com/data2').then(response => response.json()),
        fetch('https://api.example.com/data3').then(response => response.json())
      ]);

      // Combine or process the results as needed
      return { data1, data2, data3 };
    } catch (error) {
      throw error;
    }
  }

  return (
    <div>
      {/* Render your component using the fetched data */}
    </div>
  );
}

在此示例中，Promise.all() 用于同时执行三个 fetch 请求。然后根据需要组合或处理结果。这确保了请求同时执行，但结果以正确的顺序处理，从而保持了请求的顺序。