数组p处理+事件循环+事件循环流程图+post请求数据

127 阅读2分钟

// 数组的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语法走在一起的
  • 规律:微前宏后渲中间
  • 作用:处理异步事件回调的时间排序问题
  • 总结:在多个同时微任务是,则按挂起顺序来调用

事件循环流程图

微信图片_20220726001156.jpg

注解:同步代码放入到主线程中,异步代码(分宏观任务(事件,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))