为什么在获取响应上使用解构赋值会导致.json（）方法消失？

Question

感谢您抽出宝贵时间来研究这个问题。我遇到了一些意想不到的行为，我在aws lambda工作时无法弄明白。

我正在执行一个fetch，然后根据它是成功还是失败做一些不同的事情，并且最终想要使用fetch.json（）方法，如果一切都是犹太人的话。我正在使用等待使我的lambda处理程序的内部“同步”。

当我将获取的结果分配给变量然后检查它时，一切都很好。但是我喜欢整洁的代码，所以我决定使用解构赋值，突然间事情就开始了。

为了证明我对此感到困惑，我已经包含了一个代码片段，它复制了这个问题并展示了五个不同的东西 - 前两个工作，其余的工作。

在第三个例子中，“r”是一个空对象。其余的操作员打破它，我不明白。它是否正在制作一个新对象并拒绝复制属性？在解构发生时，属性不存在吗？如果是这样，为什么会好并且状态结构正确？

四是三个问题的简化示例。

五也让我感到困惑，因为我能够获得json方法，但是当我尝试执行它时它会抛出非法的调用异常。

下面的代码段：

const one = async () => {
  const r = await fetch('https://reqres.in/api/users?page=2');
  console.log(await r.json());
}

const two = async () => {
  const r = await fetch('https://reqres.in/api/users?page=2');
  const { ok } = r;
  console.log(await r.json());
  console.log(ok);
}

const three = async () => {
  const { ok, status, ...r } = await fetch('https://reqres.in/api/users?page=2');
  try {
    console.log(await r.json());
  } catch (e) {
     console.log(e);
     console.log(ok);
     console.log(status);
     console.log(r);
  }
}

const four = async () => {
  const { ...r } = await fetch('https://reqres.in/api/users?page=2');
  console.log(r);
}

const five = async () => {
  const { json } = await fetch('https://reqres.in/api/users?page=2');
  try {
    console.log(await json());
   } catch (e) {
    console.log(e);
    console.log(json);
   }
}

[one, two, three, four, five].forEach(f => f());

感谢你的宝贵时间。

注意：出于某种原因，SO将异常记录为空对象，所以这里有一个小提琴：https://jsfiddle.net/ygbm6kwq/4/

编辑：意外地在示例二中遗漏了一行，更新了片段和小提琴。

Answer 1

其余的操作员打破它，我不明白。它是否正在制作一个新对象并拒绝复制属性？

是的，正是如此。属性rest元素创建一个新对象，并将任何遗留的可枚举自有属性复制到其中。但是新的r将是一个普通的对象，而不是Response实例，因此它不会继承.json()方法。

我能够获得json方法，但是当我尝试执行它时它会抛出非法的调用异常。

是的，这是一种方法。因此必须在实例上调用它，并使用适当的this值。你可以从技术上做到

const response = await fetch('https://reqres.in/api/users?page=2');
const { json } = response;
console.log(await json.call(response));

甚至没有解构，Response.prototype.json.call(response)，但没有任何意义。