一、vue 使用引入的公共方法（utils）时报错： Failed to resolve async component default: TypeError: Object(...) is not a ...

vue 如何引入函数节流、防抖函数呢？

1、定义公共方法：utils/publickMethos.js

// 函数节流
const throttle = function(fn, delay){
    var timer;
    return function () {
        var _this = this;
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
        }, delay)
    }
}

// 函数防抖
const shakeProof = (fn, time) => {
    var timer;
    return function(){
        var _this = this;
        var args = arguments;
        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(function(){
            fn.apply(_this, args);// 用 apply 指向调用 shakeProof 方法的对象，相当于 _this.fn(args);
        }, time);
    }
}

export default {
    throttle,
    shakeProof
}

2、然后在vue文件中引入 utils/publickMethos.js 文件

这样写会报错：Failed to resolve async component default: TypeError: Object(...) is not a 

import { throttle } from '../utils/publicMethods'

methods: {
        sendSms: utils.throttle(function(){
            // ...
        }, 5000),
}

改成这样就OK了：

import utils from '../utils/publicMethods'

methods: {
        sendSms: utils.throttle(function(){
            // ...
        }, 5000),
}

分析原因：

• 通过 import { throttle } from '../utils/publicMethods' 引入的默认是对象而不是函数。
• 通过 import utils from '../utils/publicMethods' 引入的 utils 是一个指针指向 '../utils/publicMethods' 里面的方法。