导入带有回调的模块

Question

在我的 main.js 中，我有一个块，我可以将其分成自己的模块，在 api 调用后为用户设置时区，而不管 ajax调用（成功或失败），我初始化我的 Vue 实例。

main.js:

import * as moment from 'moment-timezone/moment-timezone';
moment.tz.setDefault("UTC");
window.Vue.prototype.moment = moment;

let timezone = "UTC";
let userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

axios.get('/api/timezone-data', {
    params: {
        timezone: userTimezone
    }
}).then(response => {
    // do other stuff
    initVue();
}).catch(error => {
    initVue()
});

// Separate until here into its own module

function initVue() {
   // initialises vue
}

我想了解如何将此块移动到其单独的文件中，并以某种方式能够在它触发 initVue() 方法时进行捕获。

类似于我的 main.js:

require('./tz-settings').then(() => {
   console.log('initVue() is called')
})

或者更清楚地说，

import tzSettings from './tz-settings';
tzSettings('initVueCalledInTzSettings', () => {
   initVue();

})

Answer 1

一种可能的解决方案：

Based on the comment that initVue is in main.js

import * as moment from 'moment-timezone/moment-timezone';

export default function(initVue) {
    moment.tz.setDefault("UTC");
    window.Vue.prototype.moment = moment;
    let timezone = "UTC";
    let userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    return axios.get('/api/timezone-data', {
        params: {
            timezone: userTimezone
        }
    }).then(response => {
        // do other stuff
        initVue();
    }).catch(initVue);
};

当然你也可以使用 Promise .finally

    }).then(response => {
        // do other stuff
    }).catch(error => {
        // handle the error in some way
    }).finally(initVue);

你会像

一样使用它

import tzsettings from './tz-settings.js';

tzsettings(initVue).then(() => {
   console.log('initVue() is called')
})

虽说实话，何乐而不为

export default function() {
    moment.tz.setDefault("UTC");
    window.Vue.prototype.moment = moment;
    let timezone = "UTC";
    let userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    return axios.get('/api/timezone-data', {
        params: {
            timezone: userTimezone
        }
    }).then(response => {
        // do other stuff
    });
};

并像

一样使用它

import tzsettings from './tz-settings.js';

tzsettings().finally(initVue);

为什么 tz-settings 需要了解 initVue

导入带有回调的模块

Import module with a callback

javascript

ecmascript-6

es6-promise