Node.js的bug汇总

380 阅读4分钟

1.问题: 安装弹窗error 2503
错误描述: 提示安装包和安装进程有问题

image.png

  • 分析
这个安装程序, 这个安装包有问题, 可以百度搜索下2503的解决方案 
如果都不行, 就不要用.msi安装程序了, 直接去官网下载硬盘版(二进制的文件)直接手动配置环境变量(可以百度 搜索)`
  • 解决
硬盘版安装 或者 看这个地址操作: https://jingyan.baidu.com/article/cdddd41c97e94853ca00e17e.html

2.问题image.png

答案: 文件名错误导致无法找到对应的文件

3.问题

image.png

答案: 参数类型不对,期望的类型是字符串,Buffer,而目前接收到的是对象类型

4.问题:npm相关 报错: 无法识别为可运行程序的名称

错误描述: 输入的命令不存在

image.png

  • 分析 这是要node xxx 用node执行这个js文件吧? 报错说命令怎么是我这个js文件呢? 啊, 原来没写node

解决: node 下载的包引入使用.js

一.操作dom错误

1. UncaughtTypeError:document.getElementsByClassName(...).addEventListener is not a function

原因:

选择器没有正确选择元素对象

document.getElementsByClassName(…)捕捉到的是该类名元素的数组

解决方法

document.getElementsByClassName(…)[0].addEventListener…

通过 [0] 选定需要的元素对象

与之相似的还有document.querySelectorAll('选择器'),返回的也是个伪数组,注意用下标取值后才能进行操作

2.Uncaught TypeError: Cannot set properties of undefined (setting 'innerHTML')

报错信息,在说undefined没有 innerHtml 这个属性

原因:操作dom时 , 没有获取到dom对象, 得到的是undefined 解决方法: 找到innerHTML前面的dom元素, 查看自己是否真的获取到

注意:

document.querySelectorAll('选择器')选择器基本与css保持一致 在获取类名选择器及id选择器时不要忘了前面的 . 和 #,否则获取不到,返回undefined,会出现以上报错

二.发起接口错误

1.Failed to load resource: the server responded with a status of 404 (Not Found)

image.png 原因:报404,客户端出现问题,一般情况都是因为接口地址没有调正确

最常见错误,多打个字母,多个空格等 如: image.png 解决方案: 检查接口路径是否正确,尽量直接复制黏贴接口文档中的路径

三.不了解语法特性所引起的bug

1.数组.push()语法了解不透彻

const fs =require('fs')
const path = require('path')
let url = path.join(__dirname, 'db','data.json')
let arr = JSON.parse(fs.readFileSync(url, 'utf8'))
console.log(arr);
newArr = arr.push({ name:"小张" })
console.log(newArr);
fs.writeFileSync(url,JSON.stringify(newArr)) 
复制代码

原因: 数组.push()方法返回的添加后新数组的长度,而不是新数组,理解错了,就会导致后面一系列问题如上: newArr打印出来是数组长度,那变量接收到的是长度,不是新数组,导致写入的文件为一个数字

解决方案: 数组.push()后原数组已经发生变化,直接用就可以

const fs =require('fs')
const path = require('path')
let url = path.join(__dirname, 'db','data.json')
let arr = JSON.parse(fs.readFileSync(url, 'utf8'))
console.log(arr);
arr.push({ name:"小张" })
fs.writeFileSync(url,JSON.stringify(arr)) 
复制代码

2.对象字符串拼接后,数据会改变

自己用express写的接口,用jsonp方式,给前端传一个fn()函数,里面传要给前端的数据: image.png 前端报错信息:

image.png 原因:对象经过字符串拼接后,会发生变化,测试demo:

image.png 模板字符串也一样的原理,相当于进行了拼接,前端拿不到我们想传的数据

解决方案: 把我们的数据,转为json字符串

image.png

四.vue相关

1.父子通信时,vue规定子组件不能直接改父组件传过来的值

image.png 原因:子组件直接改了父组件传来的值,就会出现上述报错

解决方案:不建议直接改值,可通过$emit()进行子向父的通信,让父亲来改

补充:父组件传给子组件的是一个对象,子组件修改对象的属性,是不会报错的,对象是引用类型, 互相更新;但不能改变引用地址

2.计算属性改值时,需要用完整写法 image.png 原因:计算属性,如果只通过逻辑计算获取值时,可简写,当需要改计算属性的值时,需用它的完整写法

简写形式:

computed: {
    "计算属性名" () {
        return "值"
    }
}
复制代码

解决方案:用他的完整写法,改值时,走set这个回调,并接收值,获取值时走get这个回调

computed: {
    "属性名": {
        set(){
            
        },
        get() {
            return "值"
        }
    }
}