使用Vue实现功能时,接口报错

在写项目的时候,使用Vue与下拉框进行双向绑定时,发现没有办法获取到数据,然后看了控制台的报错信息,发现是接口实现类出错,然后去查错,但是不知道是哪里出现了问题,请问这种错误是因为什么?

img

img

img

img

报错截完整啊,但是粗看了一下应该是sql diver没有找到的原因

【相关推荐】



  • 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7669046
  • 这篇博客也不错, 你可以看下使用vue开发项目的时候,异步请求数据,连续触发多次请求导致的渲染的数据列表数据错误的问题解决办法。
  • 您还可以看一下 黄菊华老师的公司移动站点Vue实战课程(配后台,送所有代码)课程中的 微信小程序入门到就业课(全栈课)学习说明【建议看下】小节, 巩固相关知识点
  • 除此之外, 这篇博客: 防抖、节流一步一步详细讲解,从简单到复杂,从入门到深入了解,再到 Vue 项目中是怎样调用防抖、节流方法的中的 定时器版节流与防抖方法代码逻辑详解说明: 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
    • 定时器版节流的写法不需要判断 timer 存在的情况清除定时器。
    • 为什么?这是因为就算你清除了定时器,定时器的返回值还是有值,而且 clearTimeout 的作用是什么?是清除setTimeout 里面的代码块,
    点击查看详情
  • 为什么防抖那里可以加?这是因为防抖那里没有 if (!timer) 这层判断,没有这层判断的话,初次调用的时候是没有清除定时器的,那么定时器里面的代码是会执行的,再次调用的时候,虽然 timer有值,并执行了 clearTimeout(timer),但是这个是清除了上次的定时器里面的代码块,这次的定时器里面的代码块仍是会执行的,你不断频繁的调用,就会不停的清除上次的定时器,但是最后一次的定时器还是在运行,里面的代码块最终还是会执行,所以也就实现了防抖的功能。
  • 而这个定时器版节流代码的话,如果你加了 if(timer) clearTimeout(timer); 并且有这个判断 if (!timer) ,那么在初次调用时,会执行定时器里面的代码,但是如果你快速点击(频繁的调用)的话,这个timer 是有值的,就会执行 if(timer) clearTimeout(timer); 当你执行了 clearTimeout(timer),也就把初次的定时器里面的这两行代码 timer = null; func.apply(that, args) 清除了,也就是说这个timer 永远都是有值的,也就是永远都不会进入if (!timer) 这个判断分支了,不进入这个判断分支也就不会重置 timer和执行需要节流的函数了,这样失去了封装节流函数的意义了。
    当然,如果你在定义的时间后再调用,也就是说,比如我这边设置的是3秒,如果你在初次调用的3秒后再次调用,也是可以满足条件的,但是这种情况于项目需求应该就是不符合了,所以排除这个可能性。
  • 如果加了这个判断的代码解析如下

----------------------------------------错误分割线-------------------------------------------
以下是(反面示例)错误定时器版节流代码,注意注意,不要使用这个!!!

function throttle(func, waitTime) {
    let timer;
    return function() {
        let that = this;
        let args = arguments;
        // 如果你在这一步判断了当定时器返回值timer存在,然后你使用clearTimeout 清掉的话,
        // 意味着,这两行代码不会执行,
        // timer = null;
        // func.apply(that, args) 
        // 且 timer 仍然有值,那么在这个timer 有值的情况下, 
        // if (!timer) 这个判断分支就永远都不会进入,也就代表着永远不会执行需要节流的函数了。

		// 初次不会执行,第二次调用的时候执行了,并清除了上次定时器里面的代码块,
		// timer 没有重新赋值,
		// 所以这个timer 是一直有值的,那么这个 if (!timer) 判断分支就不会进入了。
        if(timer) clearTimeout(timer); 
        if (!timer) {
            timer = setTimeout(() => {
                timer = null;
                func.apply(that, args) // 执行需要节流的函数
            }, waitTime)
        }
    }
}

以上是(反面示例)错误定时器版节流代码,注意注意,不要使用这个!!!
----------------------------------------错误分割线-------------------------------------------




 调用方法:

document.getElementById("submitBtn").onclick = throttle(handleSubmit, 3000);

 效果如下:
在这里插入图片描述

  
  


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^