zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    Unity The Method Signature Matching Rule
    Unity The Property Matching Rule
    Unity The Type Matching Rule
    Unity The Custom Attribute Matching Rule
    Unity The Member Name Matching Rule
    Unity No Policies
    Unity The Return Type Matching Rule
    Unity The Parameter Type Matching Rule
    Unity The Namespace Matching Rule
    关于TSQL递归查询的(转)
  • 原文地址:https://www.cnblogs.com/MelodysBlog/p/11614633.html
Copyright © 2011-2022 走看看