vue在IE下无法正常工作，Promise未定义？

Yiiven

发布于 2022-12-15 15:08:34

4.1K0

发布于 2022-12-15 15:08:34

文章被收录于专栏：怡文菌怡文菌

用vue写了一个日历组件，在Firefox、Edge、Chrome以及360等浏览器极速模式中运行一切正常，如图：

但在IE和360等浏览器的兼容模式下却显示了模板，看起来像乱码一样，如图：

按F12查看控制台，发现IE下报错，如图：

根据报错信息找到报错位置，代码如下：

var myVue = new Vue({
    el: '#calendar',
    data: [
        // some data...
    ],
    created: function(){
        this.init();
    },
    methods: {
        init: function(year=null, month=null){ // 这里就是报错的行
            // some code...
        }
    }
})

观察上述代码，发现并没有任何语法错误，括号对也是完整无误，但IE却报错提示缺少右括号，这是怎么回事呢？

左思右想，突然灵光一闪，在ES5的函数声明中并不能为形参赋默认值，这种写法是ES6新增的，而IE是不兼容ES6的，那就把代码改一改，这里不再赋默认值，为了让方法可以正确执行而不报错，在调用这个方法的地方都强制传参就好了，修改后的代码如下：

var myVue = new Vue({
    el: '#calendar',
    data: [
        // some data...
    ],
    created: function(){
        this.init(null, null);
    },
    methods: {
        init: function(year, month){ // 这里就是报错的行
            // some code...
        }
    }
})

既然是不兼容ES6语法造成的问题，那么我们还需要把其他地方所用到的ES6新增的语法一起修改掉，例如：

//ES6
a=> {}
b = {c(){}}
//ES5
function(a){}
b = {c:function(){}}

更多ES6新增的特性和语法，可查看以下资料：

“阮一峰”所写的ECMAScript 6 入门
由“饥人谷”搜集整理的ES 6 新特性列表
MDN的ECMAScript6兼容性表

ES6还对数组对象进行了增强，其中增加了find方法，要在IE下继续使用find方法，那就需要为ES5扩展find方法，否则IE就会报出如图所示的错误：

扩展find方法的代码如下：

if (!Array.prototype.find) {
    Array.prototype.find = function (predicate) {
        'use strict';
        if (this == null) {
            throw new TypeError('Array.prototype.find called on null or undefined');
        }
        if (typeof predicate !== 'function') {
            throw new TypeError('predicate must be a function');
        }
        var list = Object(this);
        var length = list.length >>> 0;
        var thisArg = arguments[1];
        var value;
        for (var i = 0; i < length; i++) {
            value = list[i];
            if (predicate.call(thisArg, value, i, list)) {
                return value;
            }
        }
        return undefined;
    };
}

引入了axios后，IE再次报出Promise未定义的错误，如下图：