在 TypeScript 中使用 fetch 会导致奇怪的行为

Question

我在 TS 中有函数必须返回 Promise<Array<any>>，这个函数使用 fetch：

(q: any): Promise<Array<any>> => {
    return fetch('http://speedtest.net', { mode: 'no-cors' })
        .then(response => response.json())
        .then((data: any) => [data])
        .catch(error => console.error(error))
        ;
};

它会导致 TS 编译器错误：Type 'Promise<void | any[]>' is not assignable to type 'Promise<any[]>'.

Here is link to playground

• 如果我只返回data（不是[data]）- ts 没问题
• 如果我来自 catch 块的throw new Error(error) - 对 ts 来说没问题（但对我来说不行，因为不想冒泡错误）
• 如果我来自 catch 块的return null - 对 ts 来说没问题，但为什么我需要这样做？？？

PS：

• 实际获取与提供的不同，这里是重现我的情况的最低要求
• 不要告诉我mode 在获取中，我知道，no-cors 几乎没用，返回opaque
• 是的，我需要跳过冒泡；是的，我需要在这里捕获块。

• 这个对TS来说还可以，唯一的区别是data而不是[data]

  (q: any): Promise<Array<any>> => {
  return fetch('http://speedtest.net', { mode: 'no-cors' })
      .then(response => response.json())
      .then((data: any) => data)
      .catch(error => console.error(error))
      ;
  };
  

Answer 1

问题是你传递给catch的函数返回void，所以在失败的情况下，你实际上返回一个Promise<void>。您可以通过在记录后返回某些内容来修复它，如其他答案中所述，但这很容易出错，因为您的函数的调用者不会意识到有错误。在某些情况下这可能没问题，但我建议这样写：

你可以这样写：

(q: any): Promise<Array<any>> => {
    const promise = fetch('http://speedtest.net', { mode: 'no-cors' })
        .then(response => response.json())
        .then((data: any) => [data]);
    promise.catch(error => console.error(error));
    return promise;
};

然后代码的调用者必须自己处理失败的promise，并且可以决定要做什么。或者他们可能会忽略它，并依赖某种全局机制来捕获未处理的拒绝承诺。

请注意，console.error 保证在您的方法的调用者完成任何处理之前被调用，因为传递给then 的回调与then 调用的调用顺序相同 - 请参阅https://promisesaplus.com/#point-37。

Answer 2

似乎 @Jonas W. 从评论到原始问题是正确的 (playground)

看起来data: any 在第二个then 中禁用了类型检查，就好像我引入了interface 并使用它而不是any 它会导致几乎相同的错误。

谢谢大家帮助我=)

Answer 3

如果 fetch 调用失败，它将转到.catch，然后 catch 也需要返回一些东西。返回一个空数组以确保函数 always 返回一个数组。

(q: any): Promise<Array<any>> => {
  return fetch("http://speedtest.net", { mode: "no-cors" })
    .then(response => response.json())
    .then(data => [data])
    .catch(error => {
      console.log(error)
      return []
    })
}