javascript fetch() breaks execution and throws 404

Question

I have a static azure web app and an azure function, both running locally. The function is working and showing results in the browser.

The application is a vanilla javascript app. And I have the following code:

The fetch function

async function fetchResources(city) {
    try {
      const response = await fetch("http://localhost:7071/api/GetResources/Bogotá");
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      const data = await response.json();
      console.log(data);
  
      return data;
    } catch (error) {
      console.error('Error fetching data:', error);
      //cityListContainer.innerHTML = `<p>Lo sentimos, no pudimos cargar los datos.</p>`;
    }
}

I have a function that loads content according to the path.

else if (path === "/Bogotá") {
    const resources = fetchResources("Bogotá");
     
    resources.forEach((resource) => {
        const item = document.createElement('div');
        item.innerHTML = `
        <h3>${resource.name}</h3>
        <p>Coordinador: ${resource.coordinator}</p>
        <p>Hora: ${resource.time}</p>
        <a href="${resource.whatsappGroup}" target="_blank">Grupo de WhatsApp</a>
        `;
        container.appendChild(item);
    });
   
}

when I go to the web app url: http://127.0.0.1:5500/Bogot%C3%A1, it is succesfully enrouted, and then it enters the fetch function and crashes, without any message in the line "const response = await fetch("http://localhost:7071/api/GetResources/Bogotá");". Or If I don't step into the method, it reaches "resources.forEach((resource)" in the load content function. Once I hit F10 again, it crashes.

the result is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Error</title>
</head>
<body>
    <pre>Cannot GET /Bogot%C3%A1</pre>
</body>
</html>

and the message is:

Bogot%C3%A1:1

    GET http://127.0.0.1:5500/Bogot%C3%A1 404 (Not Found)

That response comes from the web app not the function. In the function output I get this.

[2024-11-22T22:19:59.560Z] Executing 'Functions.GetResources' (Reason='This function was programmatically called via the host APIs.', Id=fe5e3e91-c355-4fa5-9253-09b3206f954d)
[2024-11-22T22:19:59.572Z] C# HTTP trigger function processed a request.
[2024-11-22T22:19:59.573Z] Executing OkObjectResult, writing value of type 'Azure.Core.PageableHelpers+FuncPageable`1[[Azure.Data.Tables.TableEntity, Azure.Data.Tables, Version=12.9.1.0, Culture=neutral, PublicKeyToken=92742159e12e44c8]]'.
[2024-11-22T22:20:00.175Z] Executed 'Functions.GetResources' (Succeeded, Id=fe5e3e91-c355-4fa5-9253-09b3206f954d, Duration=615ms)

I cannot figure out what I am missing. I understand the function was run correctly and the response sent, but the web app did not received it.

404 simply means that the URL isn't found. I recommend you avoid using characters with accents in URLs. — Barmar
– Barmar, Commented Nov 22, 2024 at 22:36
fetchResources is an async function and thus returns a promise, this means that const resources = fetchResources("Bogotá") isn't going to work the way you expect it to. You need to await it (const resources = await fetchResources("Bogotá")) or use the then method (fetchResources("Bogotá").then(resources => ...). — Lennholm
– Lennholm, Commented Nov 22, 2024 at 22:42
I did both things. modifying the function to receive bogota instead of Bogotá didn't solve the issue. @Lennholm good advice did solve it. I put the await but that means the loadContent function in which that code lives now needs to be async. — Ricker Silva
– Ricker Silva, Commented Nov 22, 2024 at 23:36
@RickerSilva That's just the nature of JS due to the fact that it's single threaded. When a process is asynchronous, everything using that process also needs to be async, you can't make it into a synchronous flow without freezing the entire JS thread. — Lennholm
– Lennholm, Commented Nov 23, 2024 at 16:20
I just described what I did so others coming here, know what it all. thank you. — Ricker Silva
– Ricker Silva, Commented Nov 23, 2024 at 22:46

P Sampath · Accepted Answer · 2024-11-25 12:32:15Z

I tried your code and encountered the Bogot%C3%A1 error with Bogotá in the url . error of Bogot%C3%A1 Update your frontend code URL as shown below:

     const url = `http://localhost:7071/api/HttpTrigger1?city=${encodeURIComponent(city)}`;

I used the sample azure Function code with sample data loaded under ?city=Bogotá:

module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');
    const city = req.query.city || (req.body && req.body.city);

    if (!city) {
        context.res = {
            status: 400,
            body: "Please pass a city in the query string or in the request body."
        };
        return;
    }

    const resources = {
        "Bogotá": [
            { name: "Resource 1", coordinator: "John Doe", time: "10:00 AM", whatsappGroup: "#" },
            { name: "Resource 2", coordinator: "Jane Doe", time: "02:00 PM", whatsappGroup: "#" }
        ],
        "Medellín": [
            { name: "Resource A", coordinator: "Carlos Pérez", time: "11:00 AM", whatsappGroup: "#" },
            { name: "Resource B", coordinator: "Ana Gómez", time: "03:00 PM", whatsappGroup: "#" }
        ]
    };

    const cityResources = resources[city];

    if (!cityResources) {
        context.res = {
            status: 404,
            body: `No resources found for city: ${city}`
        };
    } else {
        context.res = {
            status: 200,
            body: cityResources
        };
    }
};

Out pout witrh ?city=Bogotá

Make sure to add CORS in the local.settings.json:

 "Host": {
"CORS": "*"
}

Below is the sample frontend code to display the data of ?city=Bogotá

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>City Resources</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .resource-list {
            margin-top: 20px;
        }
        .resource-item {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <h1>City Resources</h1>
    
    <input type="text" id="city" placeholder="Enter city name" />
    <button onclick="getCityResources()">Get Resources</button>

    <div id="resources-container" class="resource-list"></div>

    <script>
 
        async function getCityResources() {
            const city = document.getElementById('city').value.trim();
            if (!city) {
                alert('Please enter a city name.');
                return;
            }

            const url = `http://localhost:7071/api/HttpTrigger1?city=${encodeURIComponent(city)}`;

            try {
                const response = await fetch(url);
                const data = await response.json();
                const container = document.getElementById('resources-container');
                container.innerHTML = ''; 

                if (Array.isArray(data) && data.length > 0) {
                   
                    data.forEach(resource => {
                        const resourceElement = document.createElement('div');
                        resourceElement.classList.add('resource-item');
                        resourceElement.innerHTML = `
                            <h3>${resource.name}</h3>
                            <p>Coordinator: ${resource.coordinator}</p>
                            <p>Time: ${resource.time}</p>
                            <p>Whatsapp: <a href="${resource.whatsappGroup}" target="_blank">Join Group</a></p>
                        `;
                        container.appendChild(resourceElement);
                    });
                } else {
                    container.innerHTML = `<p>No resources found for ${city}.</p>`;
                }
            } catch (error) {
                console.error('Error fetching data:', error);
                alert('An error occurred while fetching resources.');
            }
        }
    </script>
</body>
</html>

I referred to this link to add an API to Azure Static Web Apps with Azure Functions.

To initialize an Azure Static Web Apps project, install the Static Web Apps CLI and use the swa init -y command.

swa-cli.config.json:

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "new-folder": {
      "appLocation": "scr",
      "apiLocation": ".",
      "outputLocation": ".",
      "apiLanguage": "node",
      "apiVersion": "16",
      "apiBuildCommand": "npm run build --if-present"
    }
  }
}

Use swa start to start the local development server for an Azure Static Web Apps (SWA) project

saw srat ouput

Outpu to feach

Collectives™ on Stack Overflow

javascript fetch() breaks execution and throws 404

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related