Vue登录功能调用axios报Cannot convert undefined or null to object错误

你遇到的Uncaught TypeError: Cannot convert undefined or null to object报错，本质是代码中调用了要求传入对象类型的JS方法，实际传的却是null或undefined，结合你给出的登录代码，可按以下步骤排查修复：

1 先确认报错触发时机 #

• 如果页面加载完成就直接报错：问题不在这段登录代码里，去查你项目其他代码里用到Object.keys()、Object.values()、Object.assign()、Object.entries()这类对象方法的地方，确认传入的参数是否为null/undefined。
• 如果点击登录按钮后才报错：按下面的方案修改当前代码即可。

2 修复登录代码的问题 #

第一步：修改响应式变量初始值 #

你现在把username和password的初始值设为null，如果用户没输入内容直接点提交，请求参数就会带null，既不符合接口参数规范，也容易触发后续处理逻辑的报错，改成空字符串更合理：

data(){
    return{
        username: '',
        password: ''
    }
}

第二步：添加请求前参数校验 #

发请求前先判断用户有没有输入内容，避免无效请求：

methods: {
    userLogin: function(){
        // 简单非空校验
        if(!this.username.trim() || !this.password.trim()){
            alert('请输入用户名和密码后再提交')
            return
        }
        axios.post('http://localhost:8000/api/auth/login',{
            username: this.username,
            password: this.password
        })
        .then(res => {
            console.log('登录接口返回结果：',res)
            // 如果你后续要处理返回结果，一定要先加非空判断
            // 比如要把用户信息存在本地：
            // if(res && res.data){
            //     localStorage.setItem('userInfo', JSON.stringify(res.data))
            // }
        })
        .catch(err => {
            console.log('登录请求出错：',err)
        })
    }
}

3 其他排查点 #

如果修改后还是报错，打开浏览器控制台的「Sources」面板，开启「Pause on exceptions」（暂停在异常处）开关，报错时会自动定位到出错的代码行，就能直接找到问题根源。

内容的提问来源于stack exchange，提问作者Gtx666Ti