在日常开发过程中，我们往往会遇到大大小小的问题，可能是跨域，可能是前后端交互问题，也有可能是接口测试问题。。。，下面，就个人开发过程中遇到的问题简单讲解一下解决方法，这个就是我首次尝试开发小米官网的 github地址，有兴趣的可以看下。(以下方法仅供参考)
前端（纯 JS 代码的调试）
1. xxx is not defined
你使用了一个 xxx 变量， 这个变量没有定义
使用变量: 任何一个你需要获取某一个变量的值的时候
2. Cannot read property 'xxx' of undefined
你一定是写了一个 yyy.xxx 这样的东西
前面这个 yyy 是一个 undefined
3. Cannot read property 'xxx' of null
你一定是写了一个 yyy.xxx 这样的东西
前面这个 yyy 是一个 null
4. Cannot set property 'id' of undefined
你一定写了一个 yyy.xxx = zzz 这样的东西
前面这个 yyy 是一个 undefined
5. Cannot set property 'id' of null
你一定写了一个 yyy.xxx = zzz 这样的东西
前面这个 yyy 是一个 null
6. xxx.forEach is not a function
你一定是写了一个 xxx.forEach()
分成两个部分来看
1. 看 点 后面的函数名(是不是一个我们熟知的方法)
2. xxx 是不是符合使用这个方法的条件
- forEach 确实没有写错, 是一个数组常用方法
- 问题出现在 xxx 一定不是一个数组
- xxx 没有问题的
- 后面的函数名出现了问题
7. xxx is not a function
你一定写了一个 xxx()
表示 xxx 被定义过, 但是 不是一个函数, 你又把他当作 函数 来调用了
8. Unexpected token J in JSON at position 10
表示你在使用 JSON.parse(xxx) 解析了一个内容
xxx 这个内容的第 10 个位置的 J 出现的了问题, 不符合 json 格式
你就要考虑你解析的内容是从哪里来的
- 解析响应体
- 如果你请求的是本地 json 文件, 那么就证明你的 json 文件里面书写错了
- 如果你请求的是一个接口, 那么就证明这个接口给你返回的不是一个 json 格式
9. 代码改了, 页面不变
你改的文件和你浏览器打开的不是一个文件
- 直接找到你的文件名, 右键, 再资源管理器打开
- 再资源管理器打开以后, 看看到底是不是我要写的内容
缓存问题
- 当你再服务器上打开的时候
- 有可能会因为缓存, 没有即时更新文件
- 右键点击浏览器左上角的刷新按钮, 点击清除缓存强制从新加载
你的代码写在了函数里面
- 你要确定这个函数真的执行了
- 你在函数里面打印个东西, 只要浏览器上没打印出来
- 直接再控制台执行一下函数名, 看看会不会有东西
10. 写了一个事件, 但是没有执行
事件写了, 不执行
- 你的事件名称写错了
- 元素获取出错了(不是没获取到, 是获取错了)
需要渲染的页面
- 一定要先渲染完毕页面, 再绑定事件
- **有没有异步代码**
11. 请求本地 json 文件莫名其妙就跨域了
明明请求的是本地 json 文件, 咋就跨域了？
只要你发送了 ajax 请求, 就要在 服务器上 打开页面, 不能本地打开页面
- 要么你放在 WWW 目录里面, 用 apache 启动
- 要么你就启动你的 gulp, 也是再服务器上打开页面
- **本地打开的页面, 不能发送请求**
前后端（前后端交互的问题）
1. 跨域问题
你打开页面的地址和你请求的地址
- 传输协议/域名/端口号, 有任意一个不一样, 就是跨域请求
解决问题
1. jsonp 方式(前提就是后端确实是按照 jsonp 接口写的)
- 后端是自己写的时候才能修改
2. cors 方式(跨域资源共享)
- 你要和后端协商, 看看能不能开启 cors
3. 代理 方式
- 使用代理的方式进行跨域请求
2. 成功的回调没有执行
页面不报错, 也不打印内容
因为你的请求出现问题了, 成功的回调没有执行
解决问题
1. 写一个失败的回调 error
- 就可以再失败的回调里面看一下错误信息(为什么失败)
2. 去到这个请求的位置(network 里面查找)
- 找到这个请求, 点击 response
- 看看后端给我返回的到底是个什么
- 是不是一个合理的 json 格式的字符串
只要涉及到请求了
- **出现意料外的问题一定要先看 response**
- 看看这个请求的返回值是不是真的是我想要的内容
- 如果 response 和我需要的内容一摸一样, 那么问题一定出现在前端
- 如果 response 和我需要的内容不一样, 那么问题一定出现再后端
3. 接口测试问题
拿到接口
- 后端给的
- 自己写的(工作中都是后端给的)
一定要先进行接口测试
- postman 工具测试一下
确定接口没有问题, 也就是后端没有问题了
- 我们再写代码请求
- 只要出现问题, 那么就是我们自己的问题
postman 软件安装包
链接：https://pan.baidu.com/s/1UmeUhduxGLrWrQMWOv_pog
提取码：27ml
