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