Fetch is only working when my chrome dev-tool is open why?

I’m encountering an issue where a fetch API call works perfectly when the Chrome DevTools are open, but fails when the DevTools are closed. I’m using React with the useEffect hook to fetch restaurant data from an API, and the problem only occurs when running the application without the DevTools.

I’ve tried wrapping my fetch call inside an async function, using try-catch for error handling. When DevTools are open, the data is fetched, and everything works fine. However, when I close DevTools, I get an error: TypeError: Failed to fetch.

I expect the fetch call to work regardless of whether DevTools are open or closed.

useEffect(() => {
    const fetchData = async () => {
        try {
            const response = await fetch("https://www.swiggy.com/dapi/restaurants/list/v5?lat=19.9974533&lng=73.78980229999999&is-seo-homepage-enabled=true");
            const json = await response.json();
            const data = json.data?.cards?.[2]?.card?.card?.gridElements?.infoWithStyle?.restaurants;
            if (data) {
                setResList(data);
                setFilterList(data);
            } else {
                console.error("Data not found", json);
            }
        } catch (error) {
            console.error("Error fetching data", error);
        }
    };

    fetchData();
}, []);

You need to sign in to view this answers

Related Post