在javascript类中调用super之前先调用类函数

Question

I am trying to extend Request object in JavaScript. My use case is that I want to include some more methods and modify URL according to httpMethod .

I have tried like the following:

class ServiceRequest extends Request {
  constructor(config) {
    const url = config && config.url;
    const method = config && config.method;
    const body = config && (JSON.stringify(config.body) || {});
    const headers = (config && config.headers) || new Headers({
      'Content-Type': 'application/json; charset=UTF-8',
      Accept: 'application/json',
    });
    if (url && method) {
      const apiUrl = this.buildAPIPath(url, method);
    }
    super(apiUrl, {method,body,headers});
  }
  buildAPIPath (url, httpmethod) {// all the url modifications return modify url;}
}

Now it is giving error without super I can not call this. My problem here is that the url is read only, so I cannot call super first. If I call super first then I cannot reassign url.

Some suggestions on how I can make it work?

Answer 1

I am trying to extend Request object in JavaScript.

There's absolutely no reason to do that - you're not overwriting any of its methods. Just write a normal function that returns a normal Request :

function buildAPIPath (url, httpmethod) {
  // all the url modifications
  return /* modified url */;
}
export function ServiceRequest(config) {
  const url = config && config.url;
  const method = config && config.method;
  const body = config && JSON.stringify(config.body || {});
  const headers = (config && config.headers) || new Headers({
    'Content-Type': 'application/json; charset=UTF-8',
    Accept: 'application/json',
  });
  const apiUrl = buildAPIPath(url, method);
  return new Request(apiUrl, {method,body,headers});
}

It is giving error I can not call this class function before calling super

Yes. Before the super call, no instance exists, so you cannot call any methods on it. There's really no way around this. But your buildAPIPath method does not use an instance anyway, so it should not be a method at all. You would use a plain function declaration outside of the class , or a static method (which you could call with new.target.buildAPIPath(…) or ServiceRequest.buildAPIPath(…) ).

Answer 2

this class instance cannot be accessed before super because ES6 classes were designed this way, and there's no workaround. If there's a need to do that, ES6 class should be desugared to regular constructor function that doesn't have this limitation.

This is not the case, because buildAPIPath doesn't involve class instance, so it can be static method:

class ServiceRequest extends Request {
  static buildAPIPath(url, httpmethod) {
    /* ... */   
  }

  constructor(config) {
    /* ... */
    if (url && method) {
      apiUrl = new.target.buildAPIPath(url, method);
    }
    super(apiUrl, {method,body,headers});
  }
}

Answer 3

Since Request API is mostly read-only, the better approach may be to create a class wrapper around Request object, instead of extending it, something like this:

 class ServiceRequest { constructor(config) { const url = config && config.url; const method = config && config.method; const body = config && JSON.stringify(config.body || {}); // changed this as {} should also be stringified const headers = (config && config.headers) || new Headers({ 'Content-Type': 'application/json; charset=UTF-8', Accept: 'application/json', }); let apiUrl = url; // apiUrl should be outside if statement, to not error out if (url && method) { apiUrl = this.buildAPIPath(url, method); } this.request = new Request(apiUrl, {method,body,headers}); } buildAPIPath (url, httpmethod) { // all the url modifications return modify url; } } 

And later use it with fetch like this:

 const {request} = new ServiceRequest({/*opts*/}) fetch(request);