axios中止所有的网络请求
应用场景:用户频繁切换的时候 请求最后一个数据
使用CancelToken
在axios的请求拦截中,使用store存储每个请求的cancelToken实例
拦截路由,调用cancelToken()方法终止请求
new一个axios.cancelToken里面传一个函数函数接收一个c在外面定义一个变量为null 然后把变量进行赋值c 这个c就是调用取消请求的方法然后直接调用定义的变量就好了
let cancel = null document.getElementById('btn1') = function () { axios({ url: 'http//', cancelToken: new axios.cancelToken(function (c) { cancel = c }) }) .then(res => { }) .catch(err => { }) } document.getElementById('btn2') = function () { cancel()//调用source的方法cancel() }
<div> <button id="btn1">发送请求</button> <button id="btn1">终止请求</button> </div> <script> const CancelToken=axios.CancelToken//提取axios上的CancelToken const source=CancelToken.source()//CancelToken上面有个方法要调用 document.getElementById('btn1')=function(){ axios({ url:'http//', cancelToken:source.token//需要绑定一个属性 值为source.token }) .then(res=>{ }) .catch(err=>{ }) } document.getElementById('btn2')=function(){ source.cancel()//调用source的方法cancel() } </script>
vuex页面刷新数据丢失问题
1、问题描述: 一般在登录成功的时候需要把用户信息,菜单信息放置vuex中,作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值。
2、解决思路: 办法一:将vuex中的数据直接保存到浏览器缓存中(sessionStorage、localStorage、cookie)
办法二:在页面刷新的时候再次请求远程数据,使之动态更新vuex数据
办法三:在父页面向后台请求远程数据,并且在页面刷新前将vuex的数据先保存至sessionStorage(以防请求数据量过大页面加载时拿不到返回的数据)
分析:
办法一的缺点是不安全,不适用大数据量的存储;
办法二适用于少量的数据,并且不会出现网络延迟;
办法三是要讲的重点,办法二和办法一一起使用。
解决vue动态添加路由后刷新页面白屏问题
解决思路:页面刷新白屏其实是因为vuex引起的,由于刷新页面vuex数据会丢失,所以动态添加路由这一步也就失效了(之前以为,将动态添加的路由存储在了sessionStorage中,就不会vuex刷新数据丢失的影响),师父解惑:在通过vuex中的state属性存储路由在sessionStorage中,只是存储了左侧菜单栏展示的信息path地址,但是并没有存进去路由详细信息,比如name,meta值,利用vue插件即可看到本地route里面的真实数据!所以;只需要添加路由守卫,在每次页面刷新的时候都来判断是否添加的动态路由【这里设置一个变量记录是否添加的布尔值】,如果为false,即再次执行一遍添加动态路由的过程即可next()!!大功告成)
双飞翼布局的实现
一个大盒子包裹三个子盒子分别是中左右,给大盒子设置float: left;
左浮动 中间的盒子宽度写100%
左右两边各写随意 左边盒子margin-left: -100%;
右边的盒子margin-left: 设置的宽度;
做过移动端的项目吗 移动端项目自适应
1.淘宝无线适配 通过rem相同比例的进行适配
因为rem是基于html font-size的倍数 那么我们只需要设定在不同的宽度的设备上有相同比例的font-size即可那么n个rem在当前设备上的比例应该是一致的
2.响应式布局,通过@media实现一套html适配多套css实现适配 mi低儿
css的媒体监听语法,监听屏幕宽度,如果最大宽度为750px(一般区分是否移动端就按照750划分) @media screen and (max-width: 750px){ }
兼容过浏览器
css3新属性,加浏览器前缀兼容早期浏览器
-moz- /* 火狐浏览器 / -webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 / -o- / Opera浏览器(早期) / -ms- / IE */
哪些css3属性需要加:
定义关键帧动画 @keyframes css3中的变形(transform)、过渡(transtion)、动画(animation) border-radius 圆角 box-shadow 盒子阴影 flex 弹性布局
react性能优化
react子组件监听父组件传递的值的变化
想让父组件的状态更新的时候。子组件也根据这个状态更新
父组件中
this.state = { checked: false }; <Checkbox checked={checked}>Checkbox</Checkbox>
子组件中 当props发生变化时执行,初始化render时不执行,在这个回调函数里面,你可以根据属性的变化,通过调用this.setState()来更新你的组件状态,旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的,并不会触发额外的render调用
componentWillReceiveProps(props) { console.log(props) this.setState({show: props.checked}) }
大文件上传失败但是有这个需求
分片上传
前端上传大文件时使用 Blob.prototype.slice 将文件切片,并发上传多个切片,最后发送一个合并的请求通知服务端合并切片
服务端接收切片并存储,收到合并请求后使用 fs.appendFileSync 对多个切片进行合并
原生 XMLHttpRequest 的 upload.onprogress 对切片上传进度的监听
使用 Vue 计算属性根据每个切片的进度算出整个文件的上传进度
断点续传
使用 spark-md5 根据文件内容算出文件 hash
通过 hash 可以判断服务端是否已经上传该文件,从而直接提示用户上传成功(秒传)
通过 XMLHttpRequest 的 abort 方法暂停切片的上传
上传前服务端返回已经上传的切片名,前端跳过这些切片的上传
拿到文件,保存文件唯一性标识,切割文件,分段上传,每次上传一段,根据唯一性标识判断文件上传进度,直到文件的全部片段上传完毕
等待后台返回数据统一渲染
使用v-if
来控制 先定义一个变量为false 一个变量内容为空 请求成功后false设置为true 得到的数据进行赋值
ES6新增
-
let、const
-
模板字符串
-
箭头函数
-
函数参数默认值
-
扩展运算符
-
promise 是es6新提供的类;promise能够更有条理的书写异步任务
-
增强对象属性:数组解构、变量互换、属性简写
-
类 在ES6标准中提供class关键字来定义类,在写法上更简洁、语义化更强。
9.模块 引入了原生的模块化机制,其设计思想是在编译时就能确定模块的依赖关系,以及输入和输 出的变量。 ES6使用export
和import
来导出和导入模块。ES6的模块自动开启严格模式。
微信小程序授权登录
1.通过wx.login()获取code值
2.通过后端提供的api接口,使用wx.request把code值发送给后端
3.通过wx.request的success方法,接受到后端返回的自定义登录态,并保存起来,可能别的api接口需要登录态
微信小程序登录的话就是,通过wx.login()获取一个code,五分钟有效,然后通过我们的wx.request()网络请求发送code发送给我们后端,后端会访问微信的接口服务,把我们的appid+appseret sei亏瑞t +code和微信接口服务平台进行一个交换微信返回session_key 塞寻key +openid 哦penID(唯一的)后端处理openid,session_key进行关联产生一个自定义登录态 ,并且返回到我们前端,可以把它存入到setStorage同步缓存,后面发送请求可以方便的获取
微信小程序支付
点击付款=》给后端发送请求=》后端返回数据=》调用微信支付
点击付款=》获取需要付款的相关数据=》发送请求{{}}=》返回数据
wx.requestPayment({ timeStamp: '',时间戳,从 1970 年 1 月 1 日 00:00:00 至今的秒数,即当前的时间 time丝等up nonceStr: '',随机字符串,长度为32个字符以下 no丝死t而 package: '',统一下单接口返回的 prepay_id 参数值,提交格式如:prepay_id=*** 趴给age signType: 'MD5',签名算法,应与后台下单时的值一致 谁跟type paySign: '',签名,具体见微信支付文档 pay 谁跟 success (res) { },接口调用成功的回调函数 色个塞丝 fail (res) { }接口调用失败的回调函数 废噢 })
微信小程序获取用户信息
新增getUserProfile接口 getU则Profai而,可获取用户头像、昵称、性别及地区信息,开发者每次通过该接口获取用户个人信息均需用户确认。具体接口文档:《getUserProfile接口文档》
wx.getSetting() get塞挺 说白了,它不会把所有的权限全部列出来,而只是记录一下之前哪些权限授权过,哪些权限拒绝过。那些既没授权也没有拒绝的权限呢,当然,就不出来在列表中了。
增加了wx.getUserProfile之后,小程序将不支持getUserInfo来返回个人的信息以及不会弹窗,即回收该接口的开放能力,得到的用户信息将为匿名信息。故以后的小程序如果要使用用户的昵称、头像等个人信息必须通过wx.getUserProfile方法来返回。开发者如需获取用户身份标识符只需要调用wx.login接口即可。根据自己的实际需求去选择使用哪个接口。
http和https区别
http是以明文传输的超文本传输协议,HTTPS是更具有安全性ssl加密传输协议
token作用
token是服务端生成的一串字符串, 充当客户端进行请求的一个令牌, 当第一次登录后, 服务器生成一个token, 将token返回客户端, 客户端存储token, 客户端只需带上token来请求数据即可, 服务端验证token并返回数据.
token的目的是为了减轻服务器的压力,减少频繁的查询数据库。
在前端请求后台的api接口的时候,为了安全性,一般需要再用户登录成功之后才能发送其他请求。
因此,在用户登录成功之后,后台会返回一个token给前端,这个时候我们就需要把token暂时保存在本地,每次发送请求的时候需要在header里边带token(无需再次带上请求名和密码),这个时候本地的token和后台数据库中的token进行一个验证,如果两者一致,则请求成功,否则失败。
IE盒模型优点:
把盒子设置为IE盒模型,不论内边距距,边框如何改变盒子的真实宽高都不会发生改变。
盒子居中
利用文本水平居中text-align: center和行高line-height进行实现
宏任务和微任务有那些
宏任务:1. script (可以理解为外层同步代码)2. setTimeout/setInterval3. UI rendering/UI事件4. postMessage,MessageChannel5. setImmediate,I/O(Node.js)
微任务:1. Promise2.process.nextTick(Node.js) 3. Object.observe(已废弃;Proxy 对象替代)4. MutaionObserver
移动端兼容性处理
防抖和节流以及应用场景
防抖 应用场景:输入框 搜索框搜索输入
节流 比如窗口调整、页面滚动、抢购和疯狂点击等会用到节流。
视频和音频相关的处理
为什么会出现跨域问题
前端调用的后端接口不属于同一个域(域名或端口不同),就会产生跨域问题
跨域问题是浏览器同源策略限制,当前域名的js只能读取同域下的窗口属性。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
-
同源策略限制以下几种行为:
-
Cookie、LocalStorage 和 IndexDB 无法读取
-
DOM 和 Js对象无法获得
-
AJAX 请求不能发送
-
为什么const定义的内容不能更改
这是因为const保证的不是变量的值不动,而是变量指向的那个内存地址所保存的数据不能改变。对于基本数据类型,值就保存在变量指向的那个内存地址,所以用const定义的基本数据类型的值是不能改变了,而对于数组和对象,它们属于引用数据类型,变量保存的只是一个指向实际数据的指针,而这个指针指向的内存地址才是真正保存数据的值的地方,所以const只能保证这个指针不能变,但不能保证他所指向的这个内存地址里面的值不能变。 ps:概括一下,基本数据类型,变量直接就保存了内存地址;引用数据类型,变量保存一个指针,指针指向内存地址
const定义的,存放的是一个地址,如果要赋值成其他数据就会在内存中开辟一个新的空间来保存数据,这样是不行的 修改数组的值不会改变指针 数组可以通过下标进行修改数据,不能直接修改
const定义中的不变指的是指向对象的指针不变,因为修改对象中的属性并不会让指向对象的指针发生改变,所以可以改变const定义对象的属性。
箭头函数this指向
但箭头函数的this指向有点特别,它总是指向最近的外层作用域中的this所指对象。这句话明了了
小程序页面滚动的监听
scroll-view中的值e事件e.detail.scrollTop可以获取到滚动的距离
async、await 实现原理
co+generator实现的核心就是next()语法
uniapp支持第三方的微信小程序组件吗
uni-app 开启第三方导航
这里是调用了uni.openLocation(OBJECT)这个API,,它会打开对应内置的地图,你可以试一下。
uni-app 为什么不能用Echarts
display值有那些
display属性的值有:1、none,可隐藏元素;2、block,可将元素设置为块级元素;3、inline,可将元素设置为内联元素;4、inline-block,可将元素设置为行内块元素;5、table,可将元素设置为块元素级的表格;6、table-cell,可将元素设置为表格的单元格;7、table-row,可将元素设置为表格的行;8、flex,可将对象设置为弹性伸缩盒。
forEach和map的区别
共同点:
1.都是循环遍历数组中的每一项。
2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input。
3.匿名函数中的this都是指Window。
4.只能遍历数组。
forEach()
没有返回值,返回结果为undefined
map()
有返回值,可以return出来一个length和原数组一致的数组(内容可能包含undefined、null等)
类数组和数组的区别
类数组与数组的区别 相同点:都可用下标访问每个元素,都有length属性。
不同点:数组对象的类型是Array,类数组对象的类型是object,也就是说类数组原型是Object;类数组不具有数组所具有的方法,数组遍历可以用 for in和for循环,类数组只能用for循环遍历。
类数组
-
拥有
length
属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理); -
不具有数组所具有的方法;
-
类数组是一个普通对象,而真实的数组是
Array
类型。
常见的类数组有: 函数的参数arugments
, DOM
对象列表(比如通过 document.querySelectorAll
得到的列表)
Array.prototype.slice.call(arrayLike, start); 通过 call 调用数组的 slice 方法来实现转换 第二种方法 [...arrayLike]; 展开运算符 第三种方法:ES6语法 Array.from();只要有 length 属性的对象,都可以用此方法转换成数组
新建一个长度为100的数组, 并且每一项都是1
fill() 填充 let arr = [] arr.length = 100 // 或arr = Array(100) arr.fill(1)
循环 let arr = [] for(let i = 0; i < 100; i++){ arr[i] = 1 }
子节点添加margin
这其实是css外边距合并产生的
1、为父元素设置内边距padding。来代替给子元素设置margin-top
2、为父元素添加overflow:hidden;样式即可(完美)
3、为父元素设置边框border(除none以外的属性)
visibility:hidden;
和display:none;
的区别:
visibility:hidden;属性会使对象不可见,但该对象在网页所占的空间没有改变,等于留出了一块空白区域, display:none属性会使这个对象彻底消失不显示,也不再占用位置。
从浏览器地址栏输入 url 到显示页面的步骤
基础版本: 浏览器根据请求的 URL 交给 DNS 域名解析,找到真实 IP ,向服务器发起请求;
服务器交给后台处理完成后返回数据,浏览器接收⽂件( HTML、JS、CSS 、图象等);
浏览器对加载到的资源( HTML、JS、CSS 等)进⾏语法解析,建立相应的内部数据结构 (如 HTML 的 DOM);
载⼊解析到的资源⽂件,渲染页面,完成。
HTTP缓存
HTTP缓存分为强缓存和协商缓存
强缓存 与强缓存相关的字段有Expires和Cache-control,由于Expires是http1.0,Cache-control是http1.1的所以Cache-control的优先级高。
Expires Expires是存储的时间戳,这就要求服务器和本地浏览器时间要统一。
Cache-control Cache-control里面有如下字段:
-
public 表示任何能被任何对象进行缓存
-
private 仅表示能被客服端缓存
-
no-cache 表示直接进入协商缓存
-
no-store 表示不进行缓存
-
max-age 设置缓存的最大周期,单位为s,超过这个时间会被认为过期
-
s-maxage 覆盖max-age或者Expires头。如果s-maxage未过期,则向代理服务器请求其缓存内容。
-
s-maxage仅在代理服务器中生效,客户端只需要考虑max-age。
协商缓存
协商缓存机制下,浏览器需要向服务器去询问缓存的相关信息,进而判断是重新发起请求、下载完整的响应,还是从本地获取缓存的资源
split()定义和用法
split() 方法用于把一个字符串分割成字符串数组。 丝噗嘞t