// 数组的P处理
let arr = [1,2,3,4,5,6]
arr.forEach(item =>
console.log(item)
)
// 旧元素进去,新元素出来,新元素放入到新的数组中
let newarr = arr.map(item => Math.pow(item,2))
console.log(newarr);
// 满足条件(true),返回新数组
let newarr = arr.filter(item => item > 3)
console.log(newarr);
// 至少有一个元素满足条件,返回值为true
let newarr = arr.some(item => item >3)
console.log(newarr);
// 所有元素满足条件,返回值为true
let newarr = arr.every(item =>item>3)
console.log(newarr);
// 满足条件,返回第一个满足条件的元素
let newarr = arr.find(item => item>5)
console.log(newarr);
事件循环:
- 宏观任务(task):与dom/bom-api相关的函数
- 微观任务(microtask):特指promises.then/catch与js语法走在一起的
- 规律:微前宏后渲中间
- 作用:处理异步事件回调的时间排序问题
- 总结:在多个同时微任务是,则按挂起顺序来调用
事件循环流程图
注解:同步代码放入到主线程中,异步代码(分宏观任务(事件,ajax,定时器等)和微观(promises.then/catch))先挂起,通过挂起顺序来执行---微前宏后渲中间 event loop:事件循环泵(发动机)作用:将宏观任务接入到微观任务并且执行
ajax名词解释:
A:异步地
J:使用js 发起http请求
A:并且在数据回来时(异步事件)
X:渲染XML/HTML
跨域三招:
- 1.服务端配置响应头:Access-Control-Allow-Origin:*
- 2.jsonp:scrip标签的src属性不受同源策略(CORS-policy)限制+返回的内容当做js代码立即执行:onDataGot({一个海量的json数据})
- 配置代理:让服务器替你访问/Nginx
http{
server{
location /mul{
proxy_pass http://localhost:8000/calc/multiply
}
}
}
post请求
<script>
// 将数据设置为"key" = "value"
function toSearchParams(obj){
let str = ""
for(let key in obj){
str +=`&${key} = ${obj[key]}`
}
return str.slice(1)
}
function ajax({url,method,dataType,data,onSuccess,onFail }){
// XMLHTTP是一组API函数集,可被JavaScript、JScript、VBScript以及其它web浏览器内嵌的脚本语言调用,通过HTTP在浏览器和web服务器之间收发XML或其它数据。XMLHTTP最大的好处在于可以动态地更新网页,它无需重新从服务器读取整个网页,也不需要安装额外的插件
const xhr = new XMLHttpRequest()
if(!url){
throw new Error("天气太热,哪凉快哪儿呆着去")
}
method = method || "GET"
// 配置请求方式和请求路径
xhr.open(method, url)
// 初始定义dataType
let reqBody = null;
switch(true){
case dataType === "form":
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
reqBody = toSearchParams(data)
break;
case dataType === "json":
// 设置json请求头
xhr.setRequestHeader("Content-Type", "application/json")
reqBody = JSON.stringify(data);
break;
default:
break;
}
//回调无则给一个默认值
onSuccess = onSuccess || (data => console.log("default onSuccess:" , data))
onFail= onFail|| (data => console.log("default onFail:" , err))
//事件回调配置
xhr.onload = function(){
onSuccess(xhr.responseText)
}
xhr.onerror = function(err){
onFail(err)
}
// 发送请求(非GET请求可以携带请求体)
xhr.send(reqBody)
}
try{
ajax({
// 请求路径
url:"http://www.httpbin.org/post",
// 请求方式
method:"POST",
// 数据类型
dataType:"form",
// 添加数据
data:{name:'zhansan',password:123},
// 成功状态回调函数
onSuccess:data =>console.log("data=",data),
// 失败状态回调函数
onFail:err=>console.log("err=",err)
})
}catch(err){
console.log("catch:err=",err)
}
</script>
使用promises请求
// 使用promises来输出履约和毁约
// 封装函数
function promisesajax(config){
return new Promise((resolve, reject) => {
ajax({
...config,
onSuccess:data => resolve(data),
onFail:err =>reject(err)
})
})
}
promisesajax({
url: "http://httpbin.org/post",
dataType: "form",
data: {
name: "lisi",
psw: 123,
},
method: "POST",
// onSuccess: data => console.log(data),
// onFail: err => console.log(err)
})
.then(data => console.log(data))
.catch(err => console.log(err))