Блог

Я пытаюсь добавить пользовательский метод в класс заголовка.

 class RequestModule extends Headers {
     customMethod() {}
   }

    this.customHeaders = new RequestModule({headers}) 
    this.customHeaders.customMethod()
 

Когда я пытаюсь использовать этот метод, в Safari возникает ошибка

 Unhandled Promise Rejection: TypeError: this.customHeaders.customMethod is not a function. 
(In 'this.customHeaders.customMethod(options)', 'this.customHeaders.customMethod' is 
 undefined)`
 

Когда я отлаживаю this.customHeaders в консоли Safari, я получаю следующий вывод:

 append()
constructor: function()
delete()
entries()
forEach()
get()
has()
keys()
set()
values()
Symbol(Symbol.iterator)()
 

но в Chrome все работает так, как ожидалось, и пользовательские методы создаются в RequestModule и возвращаются в customHeaders

Это специфическая проблема Safari? Как я могу расширить класс заголовков в Safari?

Удалите эти фигурные скобки:

 this.customHeaders = new RequestModule({ headers })
//                                     ^ bad     ^ bad
 

В ES2015 введено сокращение для инициализаторов объектов, а конструктор заголовков интерпретирует POJO как словарь пар ключ-значение, где ключами являются имена HTTP-заголовков.

Итак, с фигурными скобками ваша строка эквивалентна этой:

 this.customHeaders = new Headers()
this.customHeaders.set('headers', headers)
 

Проблема в том, что «Headers» не является принятым именем HTTP-заголовка, и, согласно MDN:

Примечание: Все методы заголовков выдадут a TypeError , если вы попытаетесь передать ссылку на имя, которое не является допустимым именем заголовка HTTP. Операции мутации будут генерировать a TypeError , если заголовок имеет неизменяемый Guard. В любом другом случае сбоя они завершаются беззвучно.

^{Ссылки в оригинале.}

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

Это работает в Safari:

 class RequestModule extends Headers {
  customMethod() {
    console.log(`test`)
  }
}

let headers = {
  'Content-Type': 'image/jpeg',
  'X-My-Custom-Header': 'Zeke are cool'
}

let customHeaders = new RequestModule(headers)
customHeaders.customMethod()
 

В комиксах о динозаврах это довольно хорошо:

Программирование для людей, которые в восторге, когда компьютер напоминает им, что они пропускают скобку или точку с запятой