码迷,mamicode.com
首页 > Web开发 > 详细

ajax、promise串行处理等

时间:2019-10-01 09:43:37      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:urlencode   get   activex   end   字符   prope   ons   script   log   

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

 

ajax、promise串行处理等

标签:urlencode   get   activex   end   字符   prope   ons   script   log   

原文地址:https://www.cnblogs.com/MelodysBlog/p/11614633.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!