Почему использование присваивания деструктуризации в ответе на выборку приводит к исчезновению метода .json ()?

Question

Спасибо, что нашли время посмотреть на это.Я столкнулся с некоторым поведением, которое было неожиданным и которое я не могу понять, работая в лямбда-выражении aws.

Я выполняю выборку, затем выполняю некоторые другие действия в зависимости от того, удалась она или нет, и, в конце концов,использовать метод fetch.json (), если все кошерно.Я использую await, чтобы сделать внутреннюю часть моего лямбда-обработчика «синхронной».

Все было хорошо, когда я присваивал результат выборки переменной, а затем проверял ее.Но мне нравится аккуратный код, поэтому я решил использовать деструктурирующее назначение, и внезапно все начало ломаться.

Чтобы продемонстрировать, что меня смущает, я включил фрагмент кода, который дублирует проблему и показывает пять различныхвещи - первые две работы, остальные разбиваются.

В третьем примере «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 свойства создает новый объект и копирует в него все оставшиеся перечисляемые own свойства.Но новый 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), но в этом нет никакого смысла.