• 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;
    }
  • 相关阅读:
    vue中点击输入框弹出事件
    shiro
    Java转Kotlin
    RxJava2详细攻略(四)
    RxJava2详细攻略(三)
    RxJava2详细攻略(二)
    RxJava2详细攻略(一)
    DataBinding使用介绍
    类集框架
    使用CrashHandler获取应用crash信息
  • 原文地址:https://www.cnblogs.com/MelodysBlog/p/11614633.html
Copyright © 2020-2023  润新知