为啥在解构响应对象后会引发“无法在 'Response' 上执行 'json'”错误

Posted 2023-02-27

【中文标题】为啥在解构响应对象后会引发“无法在 \'Response\' 上执行 \'json\'”错误

【英文标题】：Why a "Failed to execute 'json' on 'Response'" error is raised after destructuring the response object为什么在解构响应对象后会引发“无法在 'Response' 上执行 'json'”错误

【发布时间】：2019-10-24 20:51:48

【问题描述】：

我正在实现我自己的使用fetch API 的fetch 方法。 在执行此操作时，我遇到了一个我无法解释的错误。

代码片段如下所示：

    const response: Response = await fetch(url, options);
    const  json  = response;

    return json();

问题是这段代码触发了一个promise拒绝：

TypeError: 无法在 'Response' 上执行 'json': 正文流被锁定

我知道json 方法只能调用一次，它确实如此。fetch 本身不会失败。如果我直接返回response.json()，则不会出现拒绝。

我的问题是为什么在response 对象上使用解构赋值，会锁定ReadableStream 响应的body。

【参考方案1】：

发生这种情况的原因是解构对象导致json 方法与response 的原始范围解耦。

一个解决方案是：

    const response: Response = await fetch(url, options);
    const  json  = response;

    return json.bind(response)();