常见的数据交互方面的的前端轮子,持续整理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&¶ms.success instanceof Function){ res=JSON.parse(xhr.responseText); params.success.call(xhr,res); } }else{ if(params.error&¶ms.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; }