Trying to call a static method from an imported ES6 module

Question

I'm using Firefox 56 with dom.moduleScripts.enabled set to true. This allows me to work with native ES6 modules.

I have a vue2 component which has a method defined:

import StorageZonesAjaxMethods from '../../ajax/storage-zones.js';
....
methods: {
        updateList() 
        {
            //console.log(StorageZonesAjaxMethods);
            StorageZonesAjaxMethods.getList();//function(response) { this.list = response.data.payload;});

        },
    },

where the class with the methods is:

export default new class StorageZonesAjaxMethods {

    static getItem(id, then)
    {
        axios.get(`${Config.apiBaseUrl}/storage-zones/${id}`)
            .then(response => then);
    }

    static getList(then)
    {
        alert('in get list');
        axios.get(`${Config.apiBaseUrl}/storage-zones`)
            .then(response => then);
    }

I get the error "TypeError: (intermediate value).getList is not a function" in firefx, but the console.log shows it is, but it's inside a constructor for some reason. What's going on?

score 3 · Answer 1 · answered Nov 03 '17 at 03:26

3

Never use new class { … }!

And don't default-export a class with only static methods either. Simplify to

export default {
    getItem(id) {
        return axios.get(`${Config.apiBaseUrl}/storage-zones/${id}`);
    }
    getList() {
        alert('in get list');
        return axios.get(`${Config.apiBaseUrl}/storage-zones`);
    }
};

Or even better change both files and use

export function getItem(id) {
    return axios.get(`${Config.apiBaseUrl}/storage-zones/${id}`);
}
export function getList() {
    alert('in get list');
    return axios.get(`${Config.apiBaseUrl}/storage-zones`);
}

import * as StorageZonesAjaxMethods from '../../ajax/storage-zones.js';

answered Nov 03 '17 at 03:26

Bergi

630,263
148
957
1,375

I come from the world of real coding. A class of static methods is no code smell! I considered just exporting the object, but I'd rather group sementically, cause, you know, that's what a class is for. – user3791372 Nov 03 '17 at 14:31
2

@user3791372 I don't know what you mean by "world of real coding", but in JS it definitely is a code smell. Using classes for organising code is a Java technique. JS has modules and objects for this as first-class citizens. – Bergi Nov 03 '17 at 14:33

score 0 · Answer 2 · answered Nov 03 '17 at 01:54

0

Lesson learnt - don't code with tired eyes. export default new class StorageZonesAjaxMethods in the class shouldn't have a new there

answered Nov 03 '17 at 01:54

user3791372

4,445
6
44
78

Trying to call a static method from an imported ES6 module

2 Answers2