如何创建一个新的 fetch Response 承诺？ [复制]

Question

我有一个类似于下面代码的函数 - 它生成一个fetch，在调用成功与否时执行操作，并返回一个要在下游处理的承诺：

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

我的意图是在myFunc 完成后运行一些代码，但我需要考虑调用完全失败的情况（没有 DNS 解析、拒绝调用……）。为此，我需要在 catch() 中创建并返回 Response 承诺，例如，强制返回 503 代码（这并不正确，因为服务器甚至没有回答，但无论如何）。

我的问题：如何创建这样的Response 承诺？

Answer 1

我建议您不要将网络故障转变为明显的 HTTP 故障 (503)，但既然您已经明确询问了如何做到这一点，您可以通过构建自己的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",
        }); 
    });
};

或者如果你想使用async函数：

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",
        }); 
    }
};

（请注意，第一个中不需要您的.then（除非您想使用console.log）。）

但是，我强烈建议您不要这样做。相反，通过.finally 处理程序（或async 函数中的try/finally 块）在调用点处理此问题。