ES6 Singleton versus instantiating a class once

Question

I see templates that use a singleton template using ES6 classes, and I wonder why I will use them, and not just create an instance of the class at the bottom of the file and export the instance. Is there any negative flaw for this? For instance:

ES6 Export Instance:

import Constants from '../constants';

class _API {
  constructor() {
    this.url = Constants.API_URL;
  }

  getCities() {
    return fetch(this.url, { method: 'get' })
      .then(response => response.json());
  }
}

const API = new _API();
export default API;

Application:

import API from './services/api-service'

What is the difference from using the following Singleton template? Are there any reasons to use one of the other? I am really curious to find out if the first example I gave can be problems that I don’t know about.

Singleton:

import Constants from '../constants';

let instance = null;

class API {
  constructor() {

    if(!instance){
      instance = this;
    }

    this.url = Constants.API_URL;

    return instance;
  }

  getCities() {
    return fetch(this.url, { method: 'get' })
      .then(response => response.json());
  }
}

export default API;

Application:

import API from './services/api-service';

let api = new API()

Answer 1

The difference is that if you want to check something.

, api.spec.js. API , .

, , Constants .

, :

class API {
    constructor(constants) {
      this.API_URL = constants.API_URL;
    }
    ...
}



// single-instance method first
import API from './api';
describe('Single Instance', () => {
    it('should take Constants as parameter', () => {
        const mockConstants = {
            API_URL: "fake_url"
        }
        const api = new API(mockConstants); // all good, you provided mock here.
    });
});

.

import API from './api';
describe('Singleton', () => {
    it('should let us mock the constants somehow', () => {
        const mockConstants = {
            API_URL: "fake_url"
        }
        // erm... now what?
    });
});

( ) .

Answer 2

. . , class!

import Constants from '../constants';

export default {
  url: Constants.API_URL,
  getCities() {
    return fetch(this.url, { method: 'get' }).then(response => response.json());
  }
};

import API from './services/api-service'

import Constants from '../constants';

export const url = Constants.API_URL;
export function getCities() {
  return fetch(url, { method: 'get' }).then(response => response.json());
}

import * as API from './services/api-service'

Answer 3

Singleton Pattern - (, Polymer 1.0) export.
( Singleton) .

, .

Answer 4

. - 100% es6. - , es6.

, , , es6 - ,

Answer 5

. ,

const APIobj = new _API();
export default APIobj;   //shortcut=> export new _API()

, , Singleton.

import APIobj from './services/api-service'

Taking into account that the other way to export the class is not directly singleton, as in the file where we are importing, we need to update the class, and this will create a separate instance for each update Export only the class:

export default API;

Class import and update

import API from './services/api-service';
let api = new API()