ajax、promise串行处理等

常见的数据交互方面的的前端轮子，持续整理ing~

一、手写ajax（要求考虑尽可能全面）

//对请求的data进行格式化处理
	function formataData(data){
		let arr=[];
		for(let key in data){
			arr.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key]))
		}
		return arr.join("&");
	}
	function ajax(params){
		params=params||{};
		params.data=params.data||{};

		//普通GET请求，POST请求
		params.type=(params.type||"GET").toUpperCase();
		params.data=formataData(params.data);
		//如果是ie6浏览器，那么，XMLHttpRequest是不存在的，应该调用ActiveXObject；
		let xhr=XMLHttpRequest?new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
		if(params.type==="GET"){
			xhr.open(params.type,params.url+'?'+params.data,true)
			xhr.send();
		}else{
			xhr.open(params.type,params.url,true);
			xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xhr.send(params.data);//send接收一个参数作为请求主体发送的数据，如果是get请求则不用传参，post请求的话，将数据传入
		}
		xhr.onreadystatechange=function(){
			if(xhr.readyState=4){
				//对返回数据进行正确或差错处理
				if (xhr.status === 200 || xhr.status === 304 || xhr.status === 206){
					var res;
					if(params.success&&params.success instanceof Function){
						res=JSON.parse(xhr.responseText);
						params.success.call(xhr,res);
					}
				}else{
					if(params.error&&params.error instanceof Function){
						res=xhr.responseText;
						params.error.cal(xhr,res);
					}
				}
			}
		}
	}

 

二、串行执行多个promise

1）Promise.all

　　　　　　var newArr=[
		function foo(){
		return new Promise((resolve,reject)=>{
			console.log(1)
			setTimeout(()=>{
				console.log("execute");
				resolve();
			},1000)
		})
		},
		function foo1(){
		return new Promise((resolve,reject)=>{
			console.log(2)
			setTimeout(()=>{
				console.log("execute");
				resolve();
			},1000)
		})
		},
		function foo2(){
		return new Promise((resolve,reject)=>{
			console.log(3)
			setTimeout(()=>{
				console.log("execute");
				resolve();
			},1000)
		})
		}
	]

	Promise.all(newArr).then(()=>{
		console.log('success')
	},(err)=>{console.log(err)})

o_o ....好像不太对

 

2）、async await加for循环

(async function(){
　　for (let i of arr){
	await foo(i)
　　}
　　console.log("success")
})()　　

 

三、解析url参数为对象

要求键相同的组装成数组，无值的键默认设为true，值可以转换为数字的转换为数字

function parseParam(url){
		const paramsStr=/.+\?(.+)$/.exec(url)[1];//取出？后的字符串
		const paramsArr=paramsStr.split('&');//将字符串以&分割后存到数组中
		let paramsObj={};
		//将paramsObj存到对象中
		paramsArr.forEach(param=>{
			if(/=/.test(param)){
				let [key,val]=param.split("=");
				val=decodeURIComponent(val);
				val=/^\d+$/.test(val)?parseFloat(val):val;//判断是否转为数字
				if(paramsObj.hasOwnProperty(key)){
				//对象如果有key，则添加一个值
				paramsObj[key]=[].concat(paramsObj[key],val)
				}else{
				//如果对象没有这个key，创建key并设置值
				paramsObj[key]=val;
				}
			}else{
				//处理没有val的参数
				paramsObj[param]=true;
			}
		})
		return paramsObj;
}