how to define class level constant in ES6 class

Question

How can we define class level constant and access it in static & instance methods?

 class ExternalRequests{

      const HEADERS = { "Accept":  "application/json, text/plain", "Content-Type": "application/json", "Access-Control-Allow-Origin": "*"}


      static get(url){
        return fetch(url, {method: 'get', HEADERS})
        .catch(_ => {
          throw new Error("network error");
        })
        .then(response => {
          if (!response.ok) {
            throw new Error(response.statusText);
          }
          return response.json();
        });
      }

      static post(url, data){
        return fetch(url, {method: 'post', HEADERS, body: data})
        .catch(_ => {
          throw new Error("network error");
        })
        .then(response => {
          if (!response.ok) {
             throw new Error(response.statusText);
          }
          return response.json();
        });
      }

     static put(url, data){
        return fetch(url, {method: 'put', HEADERS, body: data})
        .catch(_ => {
          throw new Error("network error");
        })
        .then(response => {
          if (!response.ok) {
            throw new Error(response.statusText);
          }
          return response.json();
        });
      }

      static delete(){
       return fetch(url, {method: 'delete', HEADERS})
        .catch(_ => {
          throw new Error("network error");
        })
        .then(response => {
          if (!response.ok) {
            throw new Error(response.statusText);
          }
          return response.json();
        });
      }

    }

    export default ExternalRequests;

ERROR

ERROR in ./externalRequests.js
Module build failed: SyntaxError: Unexpected token (3:8)

  1 | class ExternalRequests{
  2 | 
> 3 |   const HEADERS = { "Accept":  "application/json, text/plain", "Content-Type": "application/json", "Access-Control-Allow-Origin": "*"}

If every method on your class is `static`, then you don't want or need a class, you just want an object. And if you're just exporting a default object, what you actually want is a bunch of named exports. — loganfsmyth, May 03 '17 at 18:03

score 3 · Answer 1 · answered May 03 '17 at 17:54

Change it to also be a static get accessor. You can then access it as this.HEADERS from other static methods. (Unfortunately this is the best we get until JS gets class properties)

class ExternalRequests{
  static get HEADERS() {
    return { 
      "Accept":  "application/json, text/plain", 
      "Content-Type": "application/json", 
      "Access-Control-Allow-Origin": "*"
    }
  }

  static get(url){
    return fetch(url, {method: 'get', this.HEADERS})
  }
/* rest of the class ... */

If you want to use class properties right now, you could use babel-transform-class-properties, which would allow you to do:

class ExternalRequests {
  static HEADERS = /* ... your headers */
  /* ...rest of the class... */

how to define class level constant in ES6 class

1 Answers1

Linked