How to create a new fetch Response promise?

Question

I have a function similar to the code below - it makes a fetch, does things when the call is successful or not, and returns a promise to be handled downstream:

const myFunc = (): Response => {
  return fetch('http://something')
    .then(r => {
      console.log('the call went through, the return code does not matter')
      return r
    })
    .catch(err => {
        console.error(`ah crap, the call failed completely: ${err}`)
        // and here I do not know how to return a new Response
      }
    }
}

myFunc().then(r => {
  console.log('do something once myFunc is over')
})

My intention is to run some code once myFunc is done, but I need to account for the case the call completely fails (no DNS resolution, rejected call, ...). For that I need to create and return in the catch() a Response promise with, for instance, a forced 503 return code (which is not really correct because the server did not even answer, but anyway).

My question: how can I create such a Response promise?

Answer 1

I would encourage you not to turn a network failure into an apparent HTTP failure (503), but since you've specifically asked how to do that, you can do that by building your own Response object:

const myFunc = (): Response => {
    return fetch("http://something")
    .catch(err => {
        console.error(`the call failed completely: ${err}`)
        return new Response(null, {
            status: 503,
            statusText: "Fake 503",
        }); 
    });
};

or if you want to use an async function:

const myFunc = async (): Response => {
    try {
        return await fetch("http://something");
    } catch (err) {
        console.error(`the call failed completely: ${err}`)
        return new Response(null, {
            status: 503,
            statusText: "Fake 503",
        }); 
    }
};

(Note that there's no need for your .then in the first one (unless you want to do the console.log).)

But, I would strongly encourage you not to do that. Instead, handle this at the point of the call, via a .finally handler (or a try/finally block in an async function).