一.Ajax和axios的header配置有哪些
axios 的post
request
.post("https://passport.artron.net/getpasswd/verify", formdata, {
headers: { "X-Requested-With": "XMLHttpRequest" },
})
axios 的get
axios.get(this.getUrl(url), {params:data,headers: {userId,token}})
我们现在来说说post请求常见的数据格式（content-type）
Content-Type: application/json ： 请求体中的数据会以json字符串的形式发送到后端
Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端
Content-Type: multipart/form-data： 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。
如果接受的数据类型是Content-Type: application/json时
这种是axios默认的请求数据类型，我们只需将参数序列化json字符串进行传递即可，无需多余的配置
let params = {'title':'test', 'sub' : [1,2,3]}
axios({
method: 'post',
url: '/api/lockServer/search',
params
})
最终发送的请求是
{"title":"test","sub":[1,2,3]}
如果接受的数据类型是Content-Type:：application/x-www-form-urlencoded时有两种传递方式
1.【用 URLSearchParams 传递参数】代码简单，省事，不需要配置请求头
let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({
method: 'post',
url: '/api/lockServer/search',
data: param
})
2.需要先配置axios请求头中的content-type为指定类型
配置axios请求头中的content-type为指定类型
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
或者
{headers:{'Content-Type':'application/x-www-form-urlencoded'}
再将参数转换为query参数, 利用qs,引入 qs ，这个库是 axios 里面包含的，不需要再下载了。
import Qs from 'qs'
let data = {
"username": "cc",
"psd": "123456"
}
axios({
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
method: 'post',
url: '/api/lockServer/search',
data: Qs.stringify(data)
})
如果接受的数据类型是 Content-Type:Content-Type: multipart/form-data
let params = new FormData()
params.append('file', this.file)
params.append('id', localStorage.getItem('userID'))
params.append('userName', this.name)
params.append('sex', this.sex)
params.append('mobile', this.phone)
params.append('email', this.email)
params.append('qq', this.qq)
params.append('weChat', this.WeChat)
axios.post(URL, params, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
if (res.data.code === 0) {
this.$router.go(-1)
}
}).catch(error => {
alert('更新用户数据失败' + error)
})
二、for in 和for of 的区别
两者区别：
1.for-in只是获取数组的索引；而for-of会获取数组的值
2.for-in会遍历对象的整个原型链，性能差；而for-of只遍历当前对象，不会遍历原型链
3.对于数组的遍历，for-in会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)；for-of只返回数组的下标对应的属性值
4.for-of适用遍历数组／字符串/map/set等有迭代器对象的集合，但是不能遍历普通对象（obj is not iterable）
补充说明for-of只遍历当前有迭代器对象的集合，不会遍历原型链
for in 实例
let arr = [1, 2, 3, 4, 5]
Array.prototype.id = 123
arr.name = 'Jessica'
for (let index in arr) {
if (index == 2) {
// break;//0,1
// continue;//0,1,3,4
// return;//0,1
}
console.log(index, arr[index]);//遍历[1,2,3,4,5,Jessica,123]
for of 实例
let arr = [1, 2, 3, 4, 5]
Array.prototype.id = 321
arr.name = 'Mars'
for (let value of arr) {
console.log(value);//只能拿到[1,2,3,4,5]
}
三、浅拷贝和深拷贝
1.浅拷贝
浅拷贝只复制某个对象的引用，而不复制对象本身，新旧对象还是共享同一块内存
Object.assign()方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。Object.assign()拷贝的是对象的属性的引用，而不是对象本身
2.深拷贝
a、JSON转换
缺点：
1 如果对象有函数，函数无法被拷贝下来
2无法拷贝对象原型链上的属性和方法
3当数据的层次很深，会栈溢出
b、递归函数
四、es6新增语法
https://blog.csdn.net/weixin_47295135/article/details/109602321
五、防抖和节流
防抖能不断延时，直到到达时间发送请求，节流是在规定的时间间隔内只能触发一次
基本思路：定义一个定时器，假设延时1000ms，如果你正在输入内容，定时器不断刷新，不断延时1000ms，不触发请求，当停止输入时，定时器生效，发送请求
// 定义防抖函数
function debounce(fn, delay=500) { // （操作函数，延时时间）
let timer = null;
return function() {
if (timer) {
clearTimeout(timer); // timer存在则清除
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay);
}
}
const input = document.getElementById("input1");
input.addEventListener('keyup', debounce(function(){
console.log(input.value);
}, 1000));
节流 还是使用定时器，每固定一个时间段触发一次请求
// 定义节流函数
function throttle(fn, delay=500) { // 操作函数，延时时间
let timer = null;
return function() {
if (timer) {
return;
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay)
}
}
const drag1 = document.getElementById('drag');
drag1.addEventListener('drag', throttle(function(e) { // 监听拖拽事件
console.log(e.offsetX, e.offsetY); // 打印当前位置
}, 1000))
防抖的应用场景：
1.监听浏览器窗口的resize事件（不管窗口怎么变化，只执行最后一次，所以每次触发浏览器的resize事件时，应该重新触发回调函数，即响应事件）
2.在带有Ajax请求的input上输入实时搜索事件（不管输入什么，只在用户停止输入时才发送请求）
节流的应用场景：
1.下拉加载更多（无限滚动）事件
