ajaxpromise串行处理等

Posted 2022-12-08 melodysblog

常见的数据交互方面的的前端轮子，持续整理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;