fetch question

[ivory heron]

                fetch(link, {
                    redirect: "follow",
                    signal: AbortSignal.timeout(1000)
                })
                    .then((resp) => {
                        console.log(resp.status + " " + link);
                        statuses.push({url: link, status: resp.status});
                    })
                    .catch((error) => {
                        if (error.status === undefined) error.status = "error";
                        console.log("Fetch failed for: ", link + " Status Code: " + error.status)
                        statuses.push({url: link, status: error.status});
                    })

Given this js code, how can I see in the catch part if it was executed because of abort signal controller timeout?
I would like to have an if in it and do something special when the timeout was hit ...

[fringe thorn]

Hi @ivory heron. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the AbortController documentation (https://developer.mozilla.org/en-US/docs/Web/API/AbortController) for more information on handling timeouts and abort signals.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@ivory heron kapa.ai is still learning and improving, please let us how it did by reacting below

[ivory heron]

            const fetchDataa = async () => {
                let result = await fetcher('/api/hello', allHrefs);
                setSwrData(result);
            };

            fetchDataa();

@fringe thorn
How can I rewrite this function? I don't want to call it but it has to be async. is there a simpler way to define it?

[fringe thorn]

Let me check the knowledge base for you. One moment! :books:

---

You can use an immediately invoked async function expression (IIFE) to simplify your code. Here's how you can rewrite the function:

(async () => {
  let result = await fetcher('/api/hello', allHrefs);
  setSwrData(result);
})();

This way, you don't need to define a separate function and call it. The async function will be executed immediately.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@ivory heron kapa.ai is still learning and improving, please let us how it did by reacting below

[ivory heron]

@fringe thorn
If I have a list of urls to fetch from NextJS API should I send to the api the list with url's and crawl them all at once or would it be better to send url for url and crawl once at a time? I run into timeout when using edge functions and therefore I'm thinking of sending url per url to the api ...

Any suggestions?

[fringe thorn]

Let me check the knowledge base for you. One moment! :books:

---

When dealing with a list of URLs to fetch, it's generally better to fetch them in parallel to minimize client-server waterfalls and improve performance. You can use Promise.all() to achieve this. Here's an example from the Next.js documentation (https://nextjs.org/docs/app/building-your-application/data-fetching):

async function fetchData(urls) {
  const fetchPromises = urls.map(async (url) => {
    const res = await fetch(url);
    return res.json();
  });

  const results = await Promise.all(fetchPromises);
  return results;
}

However, if you're running into timeouts when using edge functions, you might want to consider fetching URLs one at a time. You can use a loop to fetch URLs sequentially:

async function fetchData(urls) {
  const results = [];

  for (const url of urls) {
    const res = await fetch(url);
    const data = await res.json();
    results.push(data);
  }

  return results;
}

Keep in mind that fetching URLs sequentially will be slower than fetching them in parallel. You should choose the approach that best fits your use case and performance requirements.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: