防抖节流
防抖:
防止用户在短时间内多次进行请求操作
(和点击或者滚动无关,只和发请求的频率有关)
防抖有N种方式(没有最好只有最适合一个功能的方式):
1. 监听数据变化
对比数据变化前后,未变化就不发送请求。
2. 验证码插件
3. 节流(让某个函数只能在特定时间才运行一次)
节流:(定时器)
让某个函数在短时间内只能运行一次
防抖节流属于性能优化的一种(非常经典的优化,能大量降低服务器的冗余请求)
跨域:
跨域产生在发送请求时,当请求服务器和响应服务器不是同一台时,就会产生跨域
非同源的服务器互相访问时,就会产生跨域
浏览器为了数据安全,给XMLHTTPRequest施加了安全限制,只允许页面请求自己服务器的数据
同源:
协议 : ip :端口
三者都相同时,就会同源,不会有跨域问题
跨域的解决方案:
1. (主流)后端设置允许请求头(让服务器来解决)
(工程师设置自己服务器可允许访问的ip)
2. jsonp(由前端来解决 很古老的一种解决方案)
原理: 利用html标签的开源策略
使用script标签去发送请求
早期原生js和jquery解决跨域的方法
//这里只是jsonp的发送,怎么收服务器接口响应的值呢?
<script src='http://服务器ip:端口/接口?callback=函数'></script>
//接收
函数(res){
}
标签请求和ajax请求是不一样的,所以后端也要单独处理
3. (主流)反向代理服务器
vue 配置proxy 解决
在vue根目录下创建vue.config.js,配置项devServer
方式一:
此方式适合仅在项目中只向一个服务器发送请求
vue.config.js:
module.exports={
devServer: {
proxy: "服务器域名" // 需要代理发送请求到的服务器域名
}
}
发送请求时:
axios.get("/cross").then(res=>{....})
方式二:
此方式适合在项目中向一个或者多个服务器发送请求
vue.config.js:
module.exports={
devServer:{
proxy:{
'/api':{ // 区分服务器的key
target:'服务器域名', // 当监听到有/api的请求,则让target代理发送请求。
ws: false, // 是否为websoket接口,我们常规都是http协议,可以不写。
changeOrigin:true,// 是否跨域
pathRewrite: {
"^/api" : "" // 请求是把区分服务器的key替换为空,为了请求的地址正确
}
},
}
}
}
发送请求时:
axios.get("/api/cross").then(res=>{....})
// 请求地址:区分服务器的key+你要访问的地址("/cross")
proxy官方文档:https://cli.vuejs.org/zh/config/#devserver-proxy