CODEWITHSUNDEEP
javascript
rick1
rick1

Reputation: 946

Extending Headers web api causes bug in Safari

I'm trying to add custom method in Header class.

class RequestModule extends Headers {
     customMethod() {}
   }

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

When I'm trying to use this method, in Safari raised an error

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

When I debug this.customHeaders in Safari's console, I have following output:

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

but in Chrome everything works as expected and custom methods created in RequestModule and returned to customHeaders

Is it specific Safari issue? How can I extend Headers class in Safari?

Upvotes: 2

Views: 145

Answers (1)

Tom
Tom

Reputation: 9167

Remove those curly braces:

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

ES2015 introduced a shorthand for object initializers, and the Headers constructor interprets a POJO as a dictionary of key-value pairs, where the keys are the names of HTTP headers.

So, with the curly braces, your line is equivalent to this:

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

The problem is that "Headers" is not an accepted HTTP header name, and, per MDN:

Note: All of the Headers methods will throw a TypeError if you try to pass in a reference to a name that isn't a valid HTTP Header name. The mutation operations will throw a TypeError if the header has an immutable Guard. In any other failure case they fail silently.

Links in original.

I guess I'd expect your code to throw a TypeError, since it seems clear it would be interpreted as passing a reference to a name that isn't a valid HTTP Header name. But, based on the behavior you're reporting, and my own experimentation, it seems to be failing silently, as provided for by that note.

This works in 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()

Dinosaur comics puts it pretty well:

Programming is for folks who are thrilled when a computer reminds them they're missing a bracket or semicolon

Upvotes: 1

Related Questions