Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I properly handle multiple requests to the same endpoint without having them return out of order in React?

I have a component that handles a request for data from our backend. The request is based on what the user clicks on in our UI and sometimes the request returns a bunch of data and sometimes it doesn’t.

We’re seeing an issue where a user will click a large request and then immediately click a small request. The problem is the small request returns before the large request, then the large request returns and overwrites the users last, smaller request.

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
    })
  }
}

How can we make sure that the data that is loaded into the mainContext?.tableData is always the users last requested data?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I fixed this using AbortController

    function handleRequest() {
  useEffect(() => {
     const controller = new AbortController();

     getTableData(controller);

     return () => controller.abort();
  }, [mainContext?.tableFilterContext])

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

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

  2. 0 
    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>
  );
}

    In this example, Promise.all() is used to execute three fetch requests concurrently. The results are then combined or processed as needed. This ensures that the requests are executed concurrently but the results are handled in the correct order, maintaining the order of the requests.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search