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

Question

感谢您花时间查看此内容。我在使用 aws lambda 时遇到了一些意外且无法弄清楚的行为。

我正在执行一次提取，然后根据它是成功还是失败做一些不同的事情，如果一切顺利的话，最终希望使用 fetch.json() 方法。我使用await 使我的lambda 处理程序的内部“同步”。

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

为了演示我的困惑，我添加了一个代码片段，该代码片段重复了该问题并显示了五个不同的内容 - 前两个有效，其余的则中断。

在第三个示例中，“r”是一个空对象。其余运算符破坏了它，我不明白。它是否创建了一个新对象并拒绝复制属性？解构发生时属性不存在吗？如果是这样，为什么 ok 和 status 会正确解构？

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

五也让我感到困惑，因为我能够获取 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 将异常记录为空对象，所以这里有一个 fiddle : https://jsfiddle.net/ygbm6kwq/4/

编辑:示例二中不小心遗漏了一行，更新了代码片段和 fiddle 。

Answer 1

The rest operator breaks it, which I do not understand. Is it making a new object and refusing to copy properties over?

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

I was able to get the json method, but then it throws an illegal invocation exception when I try to execute it.

是的，这是一个方法。因此，必须使用正确的 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)，但这没有意义。